Separator
Wraps Radix Separator. Horizontal (default) or vertical. Used to visually divide content. Decorative by default; pass `decorative={false}` for screen-reader-meaningful dividers.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { Separator } from "@avala/design"; <Separator>Separator</Separator>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-separator--defaultOpen in Storybook →
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.