Divider

🌓Dark Mode Compatible

A visual separator component for creating boundaries between content sections, supporting both horizontal and vertical orientations.

Overview

The Divider component provides a flexible way to visually separate content sections, list items, or UI elements. It supports orientation, color variants, thickness levels, spacing control, and line styles.

• Use for section breaks, list item separation, toolbar separators, and form sections.
• Avoid using dividers when whitespace alone provides sufficient separation.
• Avoid placing a divider between every list item in dense layouts.

Live demoInteractive

Anatomy

Divider is a self-closing visual element with no children. It renders a single line element and applies spacing around it.

Horizontal Divider
Section Above
━━━━━━━━━━━━━━━━━━━━━━
Section Below

Vertical Divider
Left │ Right

Parts:

• Line element: The visual separator (default <hr> for horizontal, <div> for vertical)
• Spacing: Margin around the divider (controlled via spacing)

Usage

Import the component:

import { Divider } from '@grasdouble/lufa_design-system';

Basic usage

import { Divider } from '@grasdouble/lufa_design-system';

export function Example() {
  return (
    <>
      <Divider />
      <Divider variant="subtle" />
      <Divider thickness="medium" />
      <Divider spacing="comfortable" />
      <Divider lineStyle="dashed" />
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <span>Left</span>
        <Divider orientation="vertical" />
        <span>Right</span>
      </div>
    </>
  );
}

Props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Direction of the divider line
variant	'default' | 'subtle' | 'strong'	'default'	Color variant defining visual weight
thickness	'thin' | 'medium' | 'thick'	'thin'	Thickness of the divider line (1px, 2px, 4px)
spacing	'compact' | 'default' | 'comfortable'	'default'	Margin around the divider (8px, 16px, 24px)
lineStyle	'solid' | 'dashed'	'solid'	Visual style of the line
className	string	undefined	Additional CSS classes to apply
as	ElementType	'hr' / 'div'	HTML element type to render

Also supports all standard HTML attributes for the underlying element (for example id, role, aria-*, data-*, style, and event handlers).

Accessibility

Horizontal dividers render as <hr> and are announced as separators by screen readers. Vertical dividers render as <div role="separator"> with aria-orientation.

import { Divider } from '@grasdouble/lufa_design-system';

export function AccessibleDividers() {
  return (
    <>
      <Divider aria-label="End of summary" />
      <div style={{ display: 'flex', alignItems: 'center', height: '40px' }}>
        <span>Left</span>
        <Divider orientation="vertical" />
        <span>Right</span>
      </div>
    </>
  );
}

• Use horizontal dividers for thematic breaks in content.
• Ensure vertical dividers are placed in containers with defined height.
• Add aria-label only when additional context is needed.

Theming & Tokens

Divider styling maps to design tokens:

• Variants: subtle, default, strong
• Thickness: thin (1px), medium (2px), thick (4px)
• Spacing: compact (8px), default (16px), comfortable (24px)
• Line styles: solid, dashed

Tokens adapt automatically to light and dark themes.

Do / Don’t

Do

• Prefer the default <hr> for horizontal separators
• Use subtle for frequent dividers and strong for major breaks
• Match spacing to the density of the layout
• Use vertical dividers in toolbars or button groups
• Keep divider usage consistent within a section

Don't

• Overuse dividers when whitespace is sufficient
• Use thick or strong variants for minor separations
• Place vertical dividers without a defined parent height
• Mix line styles in the same layout without intent
• Use dividers as decorative accents without context

Related Components

• Box - Container component for layout and spacing
• Stack - Layout component that can place dividers between children
• Text - Typography component often separated by dividers