Separator

Visual divider with optional label. Built on Radix UI Separator primitives for proper accessibility semantics.

Horizontal Separator

Preview

Content above

Content below

With Label

Preview

Option A

OR

Option B

Vertical Separator

Preview
Left
Right

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Direction of the separator line.
decorativebooleantrueWhen true, the separator is purely visual and hidden from assistive technology.
labelstring-Optional text label displayed in the center of the separator.
classNamestring-Additional CSS classes.

Accessibility

  • Built on Radix UI Separator with proper role="separator" when decorative is false
  • Decorative separators (default) are hidden from assistive technology via role="none"
  • Supports aria-orientation for vertical separators
  • Label text is accessible to screen readers when provided