Search for a command to run...
A thin divider between content groups. 1px line, color matches the `border-subtle` weight (sand-9 @ 12%) so it reads on any surface tier. Defaults to horizontal.
Two weights, mirroring the border-subtle / border-loud utilities so dividers and borders read as one family.
Forwards every Radix Separator.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "subtle" | "loud" | "subtle" | Weight. subtle = sand-9 @ 12% (matches border-subtle). loud = sand-9 @ 20% (matches border-loud). |
orientation | "horizontal" | "vertical" | "horizontal" | Horizontal stretches to fill width; vertical stretches to fill the parent's cross-axis (self-stretch). |
decorative | boolean | true | When false, Radix exposes the separator as a semantic ARIA separator for assistive tech. Use for content boundaries. |
className | string | undefined | Override color, thickness, margin, etc. |
Use horizontal separators between distinct content groups in a vertical list — sections of a settings page, days in a timeline, paragraphs in a long doc.
Use vertical separators between inline items in a toolbar/header — make sure the parent has a
defined height (e.g. h-8) so self-stretch has something to stretch against.
Set decorative={false} when the separator marks a semantic boundary (e.g. between major page
regions) so screen readers announce it.
Use FieldSeparator (from @delphi/ui/components/field) for separating rows inside a
FieldGroup — it adds the right negative margins to absorb the row spacing.
Drop a separator between every list item. Use divide-subtle / divide-loud on the parent
container instead — Separator is for content groups, not enumeration.
Color the separator with hard sand steps (bg-sand-6, bg-sand-7). The sand-9/12 alpha
default is surface-agnostic and matches the rest of the divider/border family.
Use a separator where whitespace would do. If the surrounding spacing already groups content visually, an extra line just adds noise.