Divider

When to useLink to "When to use"

• Horizontal (default): between sections of a page, a card or a panel that belong together but are different subjects.
• Vertical: between items in a row, such as a footer of links or groups of buttons.
• With a label: between two alternatives ("or"), or to head a group in a list ("Today").
• tone="strong": when the quiet line is lost against a busy background.

Use something else when:

• space alone separates the content well enough: Stack or Inline gap
• the line separates groups of menu items: Menu draws its own
• the section needs a title: Heading
• the content should be framed as a unit: Card

UsageLink to "Usage"

import { Divider, Inline, Link, Stack } from "@arshad-shah/cynosure";

<Stack>
  <Profile />
  <Divider />
  <Billing />
</Stack>

<Divider>or</Divider>

<Inline>
  <Link href="/docs">Docs</Link>
  <Divider orientation="vertical" />
  <Link href="/privacy">Privacy</Link>
</Inline>

A divider has no margins of its own. The gap of the Stack or Inline around it usually gives the space; where there is none, spacing (sm, md, lg) adds space above and below a horizontal line, or before and after a vertical one.

VerticalLink to "Vertical"

A vertical divider stretches to the height of its row, also when the row centres its children. It needs a flex row to take its height from: Inline, Toolbar or any display: flex row. It ignores children: a label is drawn in horizontal lines only.

LabelLink to "Label"

The label is drawn in the line. labelAlign places it at the start, center (default) or end; a start or end label sits flush with that edge, and both follow the text direction. Keep labels short.

DashedLink to "Dashed"

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Decorative by default: most dividers repeat a structure that headings and landmarks already give. Set decorative={false} when the line itself marks a boundary the reader should know about, such as "Earlier messages" in a conversation.
• Element: a div, not an hr, so that it can hold a label and stand vertically.
• Orientation: horizontal is the default of the separator role, so aria-orientation is only set on a vertical separator.
• Keyboard: none. A divider is never focusable.
• Forced colours: the line is drawn with borders and stays visible in forced-colors mode.
• Right to left: labelAlign="start" is the right edge and end the left edge.

TouchLink to "Touch"

Nothing in a divider can be pressed, so it has no hit area.

ThemingLink to "Theming"

createTheme({ components: { divider: { thickness: "2px", labelSize: "0.75rem" } } });

className and style are for layout only (width, placement). Change the look through tokens so every product stays consistent.

RelatedLink to "Related"

Stack · Inline · Toolbar · Menu · Card