A horizontal or vertical rule between content, semantic or decorative.
Example
import { Separator } from "@elements/ui/separator";
<Separator />
<Separator orientation="vertical" />
<Separator decorative />
<Separator label="or" />
Parts
| Part |
What it is |
.separator |
The rule. --separator-width and --separator-color restyle it. |
.separator.is-labeled |
A rule with text centered in it. |
Attributes
| Attribute |
Type |
Default |
Description |
orientation |
"horizontal" | "vertical" |
"horizontal" |
Direction of the rule. |
decorative |
boolean |
false |
Purely visual: role=none, removed from the accessibility tree. |
label |
string |
"" |
Text in the middle of the rule, such as "or". Names a semantic separator. |
class |
string |
"" |
Extra classes. |
attrs |
Record<string, string | number | boolean | undefined> |
{} |
Any other attributes: id, data-*. |
Data attributes
| Attribute |
Values |
On |
data-orientation |
"horizontal" | "vertical" |
root |
Accessibility
- role="separator" by default; aria-orientation="vertical" only when vertical, since horizontal is implicit.
- decorative sets role="none" for rules between things that already read as separate.
- A labeled separator is named by its label, because a separator's children are not read.
- Not focusable: a draggable divider is Resizable's job.
See also