Separator
One-pixel divider for horizontal or vertical rhythm. Exposed to assistive technology by default, decorative on request.
Preview
Live preview
First row of content
Second row of content
Third row (divider above is decorative)
Usage
Examples
Between toolbar controls
<div className="flex items-center gap-3">
<Button>Save</Button>
<Separator orientation="vertical" decorative />
<Button variant="outline">Cancel</Button>
</div>Section break inside a card
Profile details
Billing details
<Card>
<CardContent>Profile details</CardContent>
<Separator />
<CardContent>Billing details</CardContent>
</Card>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the divider. Vertical separators stretch to their container height. |
| decorative | boolean | false | Marks the divider as presentational: no role and aria-hidden, for pure visual spacing. |
| role | string | — | Override the exposed role (defaults to "separator" when not decorative). |
| className | string | — | Merged last, so you can override size or color. |
Accessibility
Accessibility notes
- Non-decorative separators render role="separator" with the matching aria-orientation, so assistive tech can announce a boundary between regions.
- Decorative separators are removed from the accessibility tree (aria-hidden) — use them whenever the layout already communicates the grouping.
- A vertical separator inside a flex row needs a height (e.g. className="h-6"); it is a layout concern the component deliberately leaves to you.