Skip to main content
Pricing

Divider

Free

A thin horizontal or vertical line used to visually separate sections of content. Can be semantic (role="separator") when it represents a meaningful boundary, or purely decorative (aria-hidden="true") when used for visual rhythm only. Available in four variants to cover common separation patterns.

6 variants

Direction

Variants

VariantDescriptionWhen to use
HorizontalFull-width horizontal line spanning the container.Use between major content sections, form groups, or stacked cards.
VerticalFull-height vertical line for side-by-side content separation.Use between inline elements like toolbar groups, stat columns, or split panels.
With LabelHorizontal line with centred text label breaking the line.Use for labelled section breaks like "or" between login methods, or date separators in chat.

Usage Guidelines

Do

Use role="separator" when the divider represents a meaningful content boundary.

Don't

Stack multiple dividers with no content between them — they add visual noise.

Do

Use aria-hidden="true" when the divider is purely decorative spacing.

Don't

Make dividers thick or high-contrast — they should be subtle, not prominent.

Do

Match the divider colour to the surface using the --lex-divider-color token.

Don't

Use a divider when whitespace alone provides enough separation.

Do

Use the Inset variant inside lists to align with text content, not leading icons.

Don't

Code

HTML
<!-- Semantic horizontal divider -->
<hr class="lex-divider" role="separator" />

<!-- Decorative divider (no screen reader announcement) -->
<div class="lex-divider" aria-hidden="true"></div>

<!-- Vertical divider in a toolbar -->
<div class="lex-toolbar" role="toolbar" aria-label="Text formatting">
  <button class="lex-icon-button" aria-label="Bold">
    <svg><!-- bold icon --></svg>
  </button>
  <button class="lex-icon-button" aria-label="Italic">
    <svg><!-- italic icon --></svg>
  </button>
  <div class="lex-divider lex-divider--vertical" role="separator"
    aria-orientation="vertical"></div>
  <button class="lex-icon-button" aria-label="Align left">
    <svg><!-- align-left icon --></svg>
  </button>
  <button class="lex-icon-button" aria-label="Align centre">
    <svg><!-- align-centre icon --></svg>
  </button>
</div>

<!-- Inset divider in a list -->
<ul class="lex-list">
  <li class="lex-list-item">Item one</li>
  <hr class="lex-divider lex-divider--inset" role="separator" />
  <li class="lex-list-item">Item two</li>
</ul>

<!-- Divider with label -->
<div class="lex-divider lex-divider--labelled" role="separator">
  <span class="lex-divider__label">or</span>
</div>
CSS Custom Properties
.lex-divider {
  border: none;
  border-top: 1px solid var(--lex-divider-color, var(--lex-border-default));
  margin: var(--lex-layout-gap, var(--lex-space-16)) 0;
}

.lex-divider--vertical {
  border-top: none;
  border-left: 1px solid var(--lex-divider-color, var(--lex-border-default));
  align-self: stretch;
  margin: 0 var(--lex-space-12);
}

.lex-divider--inset {
  margin-left: var(--lex-divider-inset, var(--lex-space-48));
  margin-right: var(--lex-space-16);
}

.lex-divider--labelled {
  display: flex;
  align-items: center;
  gap: var(--lex-space-12);
  border-top: none;
}

.lex-divider--labelled::before,
.lex-divider--labelled::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--lex-divider-color, var(--lex-border-default));
}

.lex-divider__label {
  font-size: var(--lex-font-size-xs);
  font-weight: 500;
  color: var(--lex-text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
React
// Using Lexicon CSS classes with React

export function LoginForm() {
  return (
    <Stack direction="vertical" gap={16}>
      <GoogleLoginButton />
      <GitHubLoginButton />
      <Divider label="or" />
      <EmailField />
      <PasswordField />
      <Button variant="primary">Sign in</Button>
    </Stack>
  );
}

export function FormattingToolbar() {
  return (
    <Stack direction="horizontal" gap={4}>
      <IconButton icon={<Bold />} aria-label="Bold" />
      <IconButton icon={<Italic />} aria-label="Italic" />
      <IconButton icon={<Underline />} aria-label="Underline" />
      <Divider orientation="vertical" />
      <IconButton icon={<AlignLeft />} aria-label="Align left" />
      <IconButton icon={<AlignCenter />} aria-label="Align centre" />
      <IconButton icon={<AlignRight />} aria-label="Align right" />
    </Stack>
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-divider-color——color
--lex-divider-width——width
--lex-divider-spacing——spacing

Accessibility

  • Use native <hr> for thematic breaks — it has an implicit separator role.
  • For decorative dividers use aria-hidden="true" when spacing alone provides grouping.
  • Set aria-orientation="vertical" on vertical dividers — horizontal is the default.
  • Labelled dividers should keep the label as visible text, not rely on aria-label alone.
  • Purely cosmetic dividers within lists should not interrupt the list reading order.

Keyboard Interactions

N/ADividers are not focusable — they are static layout elements.