Separator

Separator draws a themed line between blocks. Use it inside stacks and toolbars when grouped content needs a visual break.

orientation picks horizontal versus vertical, size maps to line thickness (s, m, l), and optional padding props inset the line within a Stack wrapper when the divider should not span the full content width. variant sets the border style (solid, dashed, and other CSS border styles). Pass render to replace the default hr root with a custom element while keeping Vira line styles.

Prefer border props on Surface when the edge belongs to a panel outline instead of inline content. Select dropdown option dividers belong on Select.Separator, not this layout primitive.

When to useCopy Anchor Link

• Horizontal breaks between stacked rows (settings lists, metric rows)
• Vertical splits between toolbar action groups
• An inset or dashed section rule that is not a panel outline

When not to useCopy Anchor Link

• The edge is the panel outline → Surface border
• A Select popup needs option group dividers → Select.Separator
• Content should hit the panel edges while siblings stay padded → wrap Separator in Bleed

RelatedCopy Anchor Link

• Stack — host for separator rows and toolbar strips
• Surface — panel borders instead of inline dividers
• Bleed — edge-to-edge rules inside padded sections
• Select — popup option separators

Common examplesCopy Anchor Link

Between stacked rowsCopy Anchor Link

Horizontal Separators between metric or settings rows are the usual placement. Nest them in a Stack with token rowGap, and keep the panel chrome on Surface rather than drawing a card outline with Separator.

Vertical toolbar splitCopy Anchor Link

orientation="vertical" splits action groups in a row toolbar. Put the Separator between IconButton clusters so formatting tools stay visually separate from find and save.

Thickness and insetCopy Anchor Link

size thickens the rule; hPadding (or vPadding for vertical) insets the line inside the Stack wrapper so a section break can sit under a title without spanning the full panel edge. Pair a medium dashed rule for the section break with a default thin Separator above totals when line items need a quieter split.

Axis padding tuplesCopy Anchor Link

hPadding / vPadding also take a [start, end] tuple. Inset one side only with 0, or use different tokens when the rule must clear uneven content (status chip, trailing meta).

Ask your agentCopy Anchor Link

Build a settings list inside a card — three text rows with thin dividers between each.