Skip to content
HyperDesign System

Separator

A 1px hairline in the subtle border colour, horizontal or vertical. It divides content that already belongs together. Source: src/components/ui/separator.tsx.

Horizontal

The default: full width, 1px tall. Add the spacing on the separator with my-*.

Notifications

Choose what reaches your inbox.

Mentions, replies and run failures.

Vertical

orientation="vertical" stretches to the height of its flex row. Inset it with my-* in a toolbar so it doesn't touch the edges.

Between metadata

A row of facts reads cleaner with hairlines than with middots when the values are long.

Run 482
2m 14s
12 tool calls

With a label

Two separators around a caps word, for an either/or break in a form.

or

Semantic

Separators are decorative by default. Set decorative={false} only when the rule marks a real boundary between groups, such as in a menu.

Props

Separator props
PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Horizontal is 1px tall and full width; vertical is 1px wide and stretches to the row.
decorativebooleantrueRadix. When true the rule is hidden from assistive tech (role="none"); false gives it role="separator" and aria-orientation.
...propsComponentProps<typeof Separator.Root>—Native attributes pass through; className merges last. The colour is border-subtle.

Best practices

When to use

  • Between groups that need a visible break but no heading: toolbar clusters, settings rows, metadata.
  • Prefer space first. Reach for a separator when spacing alone doesn't make the grouping clear.

Behavior

  • A vertical separator needs a parent with a height (h-* or a flex row with items-stretch) to have something to stretch to.
  • Don't stack a separator next to a border; one hairline is enough.

Accessibility

  • Keep decorative (the default) for visual rhythm. Screen readers would otherwise announce every rule.
  • Inside menus, use the menu's own separator part (DropdownMenuSeparator), which carries the right role.

Content

  • A label between separators is one short word in caps: or, and, then.