Separator
A themed horizontal or vertical rule, announced as a break or purely decorative.
On this page
The tokens set every color, size and motion on the site.
The components are built on them, and nothing else.
import { Separator } from "@/components/Separator";
import { Stack } from "@/components/Stack";
export function SeparatorExample() {
return (
<Stack>
<p>The tokens set every color, size and motion on the site.</p>
<Separator />
<p>The components are built on them, and nothing else.</p>
</Stack>
);
}Examples
Horizontal
The design system shows every component with live examples, its props and its tokens.
The site itself is prerendered to static pages and served from the edge.
A semantic separator is an <hr>. It has the separator role, so screen readers can announce the break.
Vertical
Decorative separators are hidden from assistive technology. These only divide items in a row.
Variants
Subtle (default)
Strong
Thickness
Thin (default)
Thick
Customized with component tokens
One topic ends here.
Another one starts.
.customSeparator {
--component-separator-subtle-color: var(--color-accent-border);
}Props
Any native prop not listed here goes to the root element unchanged.
There are no children. role, aria-orientation and aria-hidden come from decorative and orientation, and there's no tabIndex: it's never focusable. className and native props reach the hr or, when decorative, the div. There's no margin, so the parent's gap spaces it. Neither the hr nor the decorative div can sit inside a p, heading, button or label; use a Stack div, as in the Vertical example. A ul or ol holds only li, so divide list items with their own borders, not a Separator.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Horizontal spans its container and goes in a vertical flow (block flow or a vertical Stack). Vertical goes in a horizontal flow (a horizontal Stack), where it fills the height of its row; elsewhere it's one line tall. A semantic vertical separator says its orientation. |
decorative | boolean | false | Renders an empty div hidden from assistive technology instead of an hr. Use it where headings, lists or landmarks already mark the break, or where it only divides items in a row. |
variant | "subtle" | "strong" | "subtle" | subtle is decorative and not contrast-checked. strong is checked to 3:1 against every surface, for a line that is the only thing showing a grouping. |
thickness | "thin" | "thick" | "thin" | thin is the border width (2px), thick a step heavier (3px). Thickness is only a look: a thick line doesn't mark a bigger break for assistive technology. |
Component tokens
| Token | Copy | Description | Aliases | Light | Dark | Preview |
|---|---|---|---|---|---|---|
--component-separator-thickness-thin | Line thickness of the thin (default) variant. | effect.border.width | 2pxfrom effect.line.2 | 2pxfrom effect.line.2 | ||
--component-separator-thickness-thick | Line thickness of the thick variant. | effect.border.width-thick | 3pxfrom effect.line.3 | 3pxfrom effect.line.3 | ||
--component-separator-subtle-color | Line color of the subtle (default) variant (decorative: nothing depends on seeing it). | color.border.default | #adbac8from color.gray.300 | #63676ffrom color.slate.500 | ||
--component-separator-strong-color | Line color of the strong variant, for a line that is the only thing showing a grouping (3:1). | color.border.strong | #6d7e90from color.gray.500 | #818b9efrom color.slate.400 |
Accessibility
- Semantic by default: an <hr>, with the separator role. Keep it for a thematic break, such as a change of topic in prose or the end of a group of content. Make it decorative where headings, lists or landmarks already mark the break, or where it only divides items in a row.
- Never focusable: a focusable separator is a splitter, which resizes the panes on each side, and this one doesn't.
- A semantic vertical separator has aria-orientation="vertical". Horizontal is the role's default, so it isn't set.
- subtle lines aren't contrast-checked, since nothing depends on seeing them. strong is checked to 3:1 against every surface, for a line that is the only thing showing a grouping.
- In forced colors the line takes a system color, so both variants look the same.
- In a wrapping row, a line can start with a vertical separator. Decorative ones aren't announced, so it only affects the look.