Separator
Separator
A Radix Separator.Root — a thin rule, horizontal or vertical.
import { Separator } from "@pompeitech/vesuvius-ui";Horizontal
Vesuvius UI
A personal design system
Vertical
BlogDocsSource
API
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Vertical needs a defined height from its container (flex + items-center with a fixed-height row, as in the example above) — it has no intrinsic height of its own. |
decorative | boolean | true | true hides it from assistive tech (it's purely visual, not semantic content) by rendering role="none". Set false only if the separator genuinely marks a thematic break in content (Radix then renders role="separator" with the correct aria-orientation). |
Plus every native <div> prop.
Accessibility
Leave decorative at its default true for purely visual dividers — the common case. Only set it false when the separator itself carries meaning (separating unrelated sections of content a screen reader user should be told about), not just visual rhythm between elements that are already grouped some other way.