Divider

A line between groups of content.

import { Divider } from '@zitdevs/ui';

Examples

---

---

---

<Divider />
<Divider tone="strong" />
<Divider className="my-4.5" />

With words

or

<Divider label="or" />

Vertical

Between the items of a row, stretched to its height.

Santo DomingoPosted 2 days agoOpen

<div className="flex items-center">
  <span>Santo Domingo</span>
  <Divider orientation="vertical" className="mx-3" />
  <span>Posted 2 days ago</span>
</div>

Props

Prop	Type	Default	Notes
label	string	—	Words set in the line, which name the separator. Horizontal only.
orientation	'horizontal' | 'vertical'	'horizontal'	vertical separates items in a row, for the eye alone.
tone	'subtle' | 'strong' | 'primary'	'subtle'	The line’s colour.
ref	Ref<HTMLElement>	—	The <hr>, the labelled separator or the vertical rule.
className	string	—	Spacing: 24px above and below by default (my-6), 24px aside (mx-6) when vertical.
anything else	HTML attributes	—	On the element that renders.

Exported types: DividerProps, DividerTone, DividerOrientation.

Accessibility

• Horizontal, it is an <hr>: a thematic break, announced as a separator.
• With a label, it is role="separator" named by its words. The words are drawn in muted at 4.5:1 or more on the page and on a card.
• Vertical, it is decoration between items already set apart by their content, and hidden from assistive technology.

Without JavaScript

A line; it needs none, and renders as a Server Component.

Theming

border-subtle, border-strong and primary-line (the line), muted (the words).