← Components/primitives

Separator

Wraps Radix Separator. Horizontal (default) or vertical. Used to visually divide content. Decorative by default; pass `decorative={false}` for screen-reader-meaningful dividers.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗
primitives-separator--defaultOpen all variants →

When to use

  • Visually divide content within a card, dialog, panel, or list.
  • Decorative dividers that don't carry semantic meaning (default decorative={true}).

When not to use

  • Divide major page sections → use spacing + a heading; not a separator.
  • Carry semantic meaning (e.g. "items above were unread, below are read") → set decorative={false} so screen readers announce the role.