Separator

Anatomy

import {Separator} from '@staffbase/spark';

<Separator />

Examples

Vertical

API reference

Separator

Renders a thin visual and semantic dividing line between sections of content, with the same semantics as the HTML <hr> element via role="separator" and aria-orientation support.

When to use

• To visually divide distinct groups of content or UI elements in a layout, such as sections in a sidebar, navigation panel, or settings page.
• When two adjacent content areas need a clear visual boundary and spacing alone is not sufficient to communicate the separation.
• To divide inline items such as toolbar controls, breadcrumb segments, or metadata labels using orientation="vertical".

When not to use

• Don’t use a Separator purely for decorative spacing — use CSS margin or padding instead so screen readers aren’t given false structural cues.
• Don’t use a Separator between every item in a list or repeating group — use it only where a meaningful group boundary exists.
• Don’t use a Separator to structure a form or divide form fields — use Field groupings and section headings instead.

How to use

Orientation

• Use orientation="horizontal" (default) to draw a full-width line between vertically stacked content areas.
• Use orientation="vertical" to draw a line between side-by-side inline items; the separator stretches to the height of the flex container it is placed in.

Width & padding

• Use a full-width separator (no horizontal padding on the container) when dividing groups that are unrelated to each other, so the line visually bleeds to the edge.
• Use an inset separator (horizontal padding on the container) when dividing groups that are related, to signal that the content on both sides belongs to the same parent section.

Spacing

• Always leave space between a Separator and adjacent elements — never place content directly against it with zero margin.
• Match the spacing on both sides of the separator for visual balance.

Styling

• Don’t add custom borders, shadows, background colors, or other visual modifications to the Separator — use the default styling only.
• Only place Separators on surface-level backgrounds (--sb-background-color-neutral-surface); don’t use them on tinted, colored, or image backgrounds.

Accessibility

• The Separator renders as role="separator" with the aria-orientation attribute set to match the orientation prop, communicating a thematic break to assistive technology.
• If a Separator is purely decorative and conveys no meaning, mark it with role="presentation" or aria-hidden="true" so assistive technologies ignore it.