Separator

The default horizontal separator, rendered as a full-width line using the border CSS variable. The Separator component defaults to SeparatorOrientation.Horizontal and renders a thin divider that spans the full width of its parent container.

A vertical separator between inline elements, created by setting Orientation to SeparatorOrientation.Vertical. The vertical separator renders as a thin line that spans the full height of its parent, making it ideal for dividing horizontally arranged items like breadcrumb links or toolbar sections.

A separator with centered text overlay, commonly used in authentication forms for "or continue with" patterns. Use absolute positioning and a bg-background span to overlay text on the separator line, creating a clean visual break between content sections.

The Decorative parameter controls the separator's accessibility semantics. When Decorative is true (the default), the separator uses role="none" and is hidden from assistive technologies. Set Decorative to false for a semantic separator with role="separator" and aria-orientation, which is announced by screen readers.

Separators used within a Card layout to divide groups of settings or form fields. This pattern is common in settings panels and preference pages where visually distinct sections help users scan and understand the grouping of related options.

Separators in a navigation menu to visually group related actions and isolate destructive items like Log out. Adding a separator with class="my-2" before destructive actions creates a clear visual boundary, signalling to users that the following action is different in nature.