Divider

Visual separator for grouping content.

Examples

Basic

<Divider {...args} />

With Label

Section 2

<Divider orientation="horizontal" variant="subtle" label="Section 2" />

Variants

Subtle (default)

Strong

<div style={{display: 'flex', flexDirection: 'column', gap: '2rem'}}>
  <div>
    <Text color="secondary" size="sm">
      Subtle (default)
    </Text>
    <Divider />
  </div>
  <div>
    <Text color="secondary" size="sm">
      Strong
    </Text>
    <Divider variant="strong" />
  </div>
</div>

Vertical

Left

Right

<div className={verticalContainerStyle}>
  <Text>Left</Text>
  <Divider orientation="vertical" />
  <Text>Right</Text>
</div>

Vertical With Label

Left

or

Right

<div className={verticalContainerStyle} style={{height: '120px'}}>
  <Text>Left</Text>
  <Divider label="or" orientation="vertical" />
  <Text>Right</Text>
</div>

Horizontal Width

A horizontal divider sized with the `width` prop (200px, then 60%).

<div style={{display: 'flex', flexDirection: 'column', gap: '1.5rem'}}>
  <Text color="secondary" size="sm">
    A horizontal divider sized with the `width` prop (200px, then 60%).
  </Text>
  <Divider width={200} />
  <Divider variant="strong" width="60%" />
</div>

Vertical Height

Left

Middle

Right

<div style={{display: 'flex', alignItems: 'center', gap: '1.5rem'}}>
  <Text>Left</Text>
  <Divider height={40} orientation="vertical" />
  <Text>Middle</Text>
  <Divider height={80} orientation="vertical" variant="strong" />
  <Text>Right</Text>
</div>

Full Bleed

Content above the divider.

Content below the divider.

<Card>
  <Text>Content above the divider.</Text>
  <div style={{marginBlock: '1rem'}}>
    <Divider isFullBleed />
  </div>
  <Text>Content below the divider.</Text>
</Card>

Full Bleed Vertical

Left

Right

<Card style={{height: '120px'}}>
  <div className={verticalContainerStyle} style={{height: '100%'}}>
    <Text>Left</Text>
    <Divider isFullBleed orientation="vertical" />
    <Text>Right</Text>
  </div>
</Card>

API

Divider

Visual separator for grouping content.

Prop	Type	Default	Description
aria-label	string	—	Accessible label for the separator. Use when the divider conveys meaning beyond a visual break (e.g., separating named sections).
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
height	number | string	—	Length of a vertical divider. Numbers are treated as pixels. Ignored for horizontal dividers, which size to their container width.
isFullBleed	boolean	—	Whether the divider should escape container padding.
label	ReactNode	—	Optional label rendered in the divider.
orientation	"horizontal" | "vertical"	—	Divider orientation. Default is horizontal.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
style	CSSProperties	—	Inline styles applied to the root element.
variant	"strong" | "subtle"	—	Visual weight of the divider. Default is subtle.
width	number | string	—	Length of a horizontal divider. Numbers are treated as pixels. Ignored for vertical dividers, which size to their container height.