Separator
A semantic or decorative divider for separating content.
Features
Semantic or decorative
Horizontal and vertical orientation
data-orientationstyling hooksasChildcompositionHeadless styling
Installation
npm install @ariaui/separator
Examples
Separator examples use the same primitive for horizontal content breaks and vertical inline dividers. Use decorative when the line is visual-only.
Horizontal
A horizontal semantic divider between related sections of content.
No preview output yet.
Vertical
Vertical dividers can be semantic or decorative depending on whether they communicate structure.
No preview output yet.
Anatomy
import * as Separator from "@ariaui/separator";
export default function Example() {
return <Separator.Root />;
}
API Reference
Root
Divider primitive. Renders a semantic separator by default, can be decorative, and reflects orientation for styling.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
orientation | "horizontal" | "vertical" | "horizontal" |
decorative | boolean | false |
| Attribute | Values |
|---|---|
| [data-orientation] | "horizontal" | "vertical" |
| role | "separator" | "none" |
| aria-orientation | "vertical" when semantic and vertical |
Accessibility
Separator.Root renders role="separator" by default. Horizontal separators use the ARIA default orientation, while vertical separators expose aria-orientation="vertical".
Use semantic separators when the divider communicates document or interface structure. Use decorative when the line is only visual decoration; decorative separators render with role="none".
Decorative dividers
If a separator only supports spacing, borders, or visual grouping that nearby text already communicates, set decorative so it does not add extra structure to the accessibility tree.