Divider

layout

Visual separator supporting horizontal/vertical orientation, default/accent color variants, and centered label text with line masking. Uses role=separator with aria-orientation.

Import

typescript
import { Divider } from "packages/ui/src";

Props

DividerProps

PropTypeRequired
orientationDividerOrientationNo
variantDividerVariantNo
labelstringNo

Examples

Divider

Visual separator for content sections, supporting horizontal/vertical orientation, accent color, and centered labels.

Horizontal

Content above the divider

Content below the divider

Accent Variant

Standard divider above

Accent divider above

With Label

Vertical

Metadata

Component Metadata
Familylayout
FrameworksNext.js, Astro/EmDash
DescriptionVisual separator supporting horizontal/vertical orientation, default/accent color variants, and centered label text with line masking. Uses role=separator with aria-orientation.
PropsDividerProps (orientation?: DividerOrientation, variant?: DividerVariant, label?: string)
Stateshorizontal, vertical, default, accent, labeled
A11y
  • role=separator with aria-orientation
  • Decorative label not separately announced
Responsive
  • Horizontal fills container width
  • Vertical stretches to parent height
Motion
  • No animation
Token Dependencies
  • components.divider.color
  • components.divider.thickness
  • components.divider.spacing
  • components.divider.labelColor
  • components.divider.labelFontSize
  • components.divider.labelBackground
  • components.divider.labelPadding
  • components.divider.accentColor
Content Slotslabel (string — optional centered text)
CMS Bindings
  • Section divider label from CMS field
Test Cases
  • Renders horizontal by default
  • Renders vertical orientation
  • Applies accent variant
  • Shows label text
  • Has role=separator
  • Has aria-orientation
  • Label mode has two lines
  • Passes className through