← Inventory
Separator
Visual rule dividing content sections, horizontally or vertically.
Renders a Radix Separator. Decorative by default, so it is hidden from the
accessibility tree; pass decorative={false} when the divide is semantically
meaningful and should be announced to assistive technology.
Overview
Specifications
Availability
Usage
import { Separator, SeparatorVariant } from "@desk/ui/components/separator";Best practices
It's decorative (hidden from the a11y tree) by default — pass
decorative={false}only when the divide is semantically meaningful and should be announced.For an inline rule set
orientation="vertical"and give it an explicit height (e.g.className="h-6") — a vertical separator has no intrinsic length.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "strong" | "default" | "muted" | "accent" | "default" | Visual weight of the separator line. |
Also exports
- type
SeparatorVariant