atom

Divider

Horizontal or vertical separator line for visually dividing content sections.

Overview

The Divider component is a simple visual separator used to divide content into distinct sections. It supports both horizontal and vertical orientations, with configurable spacing to match different layout needs.

Content above

Content below

Props

Prop Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' Direction of the divider line
spacing 'none' | 'sm' | 'md' | 'lg' 'none' Margin around the divider
label string - Text label displayed between two lines (horizontal only)

Variants

Orientation

Dividers can be horizontal (default) or vertical for inline separation.

Left content Right content
Item 1 Item 2 Item 3 
<Divider orientation="horizontal" />
<Divider orientation="vertical" />

Spacing

Control the margin around the divider with spacing variants.

No spacing

Content

Small spacing

Content

Medium spacing

Content

Large spacing

Content

<Divider spacing="none" />
<Divider spacing="sm" />
<Divider spacing="md" />
<Divider spacing="lg" />

Label

Add a text label between two lines for "or"-style separators. Labels only work with horizontal orientation. 

<Divider label="OR" spacing="md" />
<Divider label="Continue with" spacing="md" />

Examples

Section Separation

Use dividers to separate content sections.

Section 1

Some content in the first section.

Section 2

Some content in the second section.

Login Separator

Common pattern for separating login methods.

<Button role="primary" fullWidth>Sign in with Email</Button>
<Divider label="OR" spacing="sm" />
<Button role="secondary" fullWidth>Sign in with Google</Button>

Inline Items

Vertical dividers separate inline items in toolbars or navigation.

File Edit View Settings Help

Accessibility

  • Role: Uses role="separator" to indicate the element divides content.
  • Orientation: Includes aria-orientation to announce the direction to screen readers.
  • Non-Interactive: Dividers are presentational and not focusable.
  • WCAG Compliance: Meets AA standards for semantic structure.

Best Practices

  • Use dividers to create meaningful content sections, not just decoration
  • Don't overuse dividers - use spacing and layout as alternatives
  • Vertical dividers work best with inline or flex layouts
  • For purely decorative lines, consider CSS borders instead