Separator
Visual or semantic rule between groups of content.
2.0 kBgzipped
At a glance
- Horizontal (default) or vertical orientation.
- Decorative by default — use
decorative={false}when the rule carries meaning a screen reader should announce. - One-pixel rule using the semantic border color, so it adapts to your theme.
Horizontal
Vertical
Pass orientation="vertical" and place inside an HStack (or any
flex-row container). The separator stretches to its container's
height via align-self: stretch.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | — |
decorative | boolean | true | When true (the default), the separator is purely visual and removed from the accessibility tree. Set to false when the rule is meaningful structure that screen readers should announce. @defaultValue true |
orientation | enum | horizontal | Visual orientation of the rule. @defaultValue 'horizontal' |