Separator
A one-pixel rule that divides content, horizontal or vertical. Decorative by default, announced only when the division carries meaning.
A border with no surface
Put a separator between siblings when neither owns a border of its own: rows in a list, groups in a toolbar, a dialog header over its body. If the thing on either side already draws a border, the boundary is already there and a separator only doubles it. The line paints --border, the same step every other border in the system uses. There is no color prop; a consumer that needs another color passes one through className.
Kyoto
Osaka
Nara
Kyoto
Osaka
Nara
Orientation
orientation is an axis, not a variant, and there is no size: thickness is one pixel in both directions. Horizontal is the default and fills the width of its parent. Vertical stretches to the height of the flex or grid row it sits in, so a toolbar divider needs no explicit height. Radix writes the axis out as data-orientation, which is a public CSS hook.
Announced or not
A separator is decorative by default and a screen reader hears nothing. Pass decorative={false} when the boundary itself carries meaning that no other markup states, such as between two form sections that have no headings. The announced separator exposes role="separator"; a vertical one also carries aria-orientation="vertical", and a horizontal one sets nothing because ARIA already defaults to horizontal. It looks exactly the same either way: one line, one look. The separator is never focusable and never enters the tab order.
Traveller details
Payment details
Traveller details
Payment details
Spacing
The separator carries no margin of its own. The parent owns the spacing through gap, so one number sets the rhythm for the rows and the rules between them and nothing has to be undone at the ends of a list. One rule to remember: vertical stretches to its row, so in a parent that is neither flex nor grid it has no height to take and the caller must pass one through className.
Tight rhythm
gap-2
Loose rhythm
gap-6
Tight rhythm
gap-2
Loose rhythm
gap-6
Not a labelled separator
A line with centered text — the "or" between a sign-in form and its social buttons — is a different DOM shape, not a variant of this component. The props type omits children so that shape cannot be faked by passing text into the rule. Build it in the app that needs it, or spec it as its own component.