Divider

Horizontal or vertical separator line, with optional centred label.

import { ... } from '@corndev/ui'

Home

About

Contact

HTML

No JavaScript required — these classes are the whole component.

<hr class="" data-orientation="horizontal" />

<div class="" data-orientation="horizontal" data-labelled>
  <span class="corn-divider-label">or</span>
</div>

Classes

Class	Description
`.corn-divider`
`.corn-divider-label`	The label span inside a labelled divider

Attributes

Attribute	Values
`data-orientation`	`horizontal\|vertical`
`data-labelled`	`present or absent`

Vanilla JS

Optional. createDivider only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createDivider } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createDivider(el, { /* options */ });

Options

Option	Type	Default	Description
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`	Rule direction. A vertical divider stretches to fill a flex parent.
`labelled`	`boolean`	`false`	Draw the rules as pseudo-elements either side of a centred label. Requires a container element with a `.corn-divider-label` child — apply it to a `<div>`, never an `<hr>`.

React

Divider — from @corndev/ui-react.

Props

Prop	Type	Default	Description
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`	Rule direction. A vertical divider stretches to fill a flex parent.
`label`	`React.ReactNode`	`undefined`	Centred label. Supplying it switches the element from `<hr>` to a `<div>` and applies the labelled treatment.
`className`	`string`	`undefined`

Horizontal

import '@corndev/ui/theme';

<hr class="" data-orientation="horizontal" />

With label

Add data-labelled and a .corn-divider-label span to centre text between the lines. Use a <div> here rather than an <hr> — the labelled variant draws its rules with pseudo-elements and so needs a child element.

<div class="" data-orientation="horizontal" data-labelled>
  <span class="corn-divider-label">or</span>
</div>

Vertical

Use data-orientation="vertical" inside a flex container to draw a vertical separator between inline elements.

<div style="display: flex; align-items: center; gap: 8px;">
  <span>Home</span>
  <div class="" data-orientation="vertical"></div>
  <span>About</span>
  <div class="" data-orientation="vertical"></div>
  <span>Contact</span>
</div>