Separator
A visual or semantic divider that separates content into distinct sections, supporting both horizontal and vertical orientations with configurable accessibility semantics for screen readers.
Horizontal
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.Vertical
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.With Label
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.Decorative vs Semantic
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.In Card
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.In Navigation
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.