Components

Divider

A thin line that separates groups of content. Comes in horizontal and vertical orientations, three weight variants, and an optional centered text label.

Variants

Three color weights map to Cedar border tokens. subtle is the default and right for most separations — strong is reserved for major section breaks.

subtle
base
strong

With label

Pass a label prop to place text centered on the divider line. Common for "Or continue with" auth flows and named section breaks.

Or continue with
Section B
Advanced settings

Vertical

Set orientation="vertical" to create an inline separator. The divider stretches to the height of its flex container via align-self: stretch.

EditDuplicateArchiveDelete

In context — settings rows

The most common pattern: subtle horizontal dividers between rows inside a settings panel or card.

Display nameGreg Radcliffe
Email addressgreg@example.com
Time zoneUTC−5 (Eastern)
LanguageEnglish (US)

Props

variant"subtle" | "base" | "strong""subtle"Line color weight.
orientation"horizontal" | "vertical""horizontal"Axis of the divider.
labelstring—Centered text. Horizontal only.
decorativebooleantrueWhen true: role="none" aria-hidden. Set false when the divider carries semantic meaning.

Accessibility

decorative=true (default)Sets role="none" aria-hidden="true". Screen readers skip it — correct for the vast majority of dividers that are purely visual.
decorative=falseSets role="separator". Use when the divider marks a meaningful boundary that a screen reader user needs to know about.
aria-label (with label)When decorative=false and a label is set, the label text becomes the accessible name of the separator.
aria-orientationSet to "vertical" on vertical dividers so assistive technology announces the orientation correctly.

Usage guidance

DoUse subtle dividers between rows in lists, tables, and settings panels.
DoUse the label variant to name sections within a single scrollable panel.
DoUse vertical dividers inside flex toolbars to group related actions.
Don'tUse dividers as a substitute for spacing. If content just needs more breathing room, increase gap or padding instead.
Don'tUse strong dividers between every row — reserve them for top-level section breaks.
Don'tStack two dividers back to back. Use a single divider or a section header instead.

Tokens used

border/subtlesubtle variant color (default)
border/basebase variant color
border/base (2px)strong variant — same color as base, doubled weight
text/subtleLabel text color
space/3Gap between label and line ends (12px)
font/baseLabel typeface
size/xsLabel font size
Figma: In progressReact: v1