Components

Separator

Separators visually divide groups of content using a thin horizontal or vertical line.

Stable

Anatomy

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

<Separator />

Left

Right

Name	Type	Description
`orientation`	`horizontalvertical`	The axis along which the separator is rendered. Default:`horizontal`

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".

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.

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.

Section A

Section B

Content A

Content B

Horizontal separator between stacked content; vertical separator between inline items.

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.

Group A

Group B

Related A

Related B

Full-width for unrelated groups (left); inset for related groups (right).

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.

Content above

Content below

Consistent spacing above and below the separator.

Don't

Content above

Content below

Content placed directly against the separator with no spacing.

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.

The Separator renders as role="separator" with the aria-orientation attribute set to match the orientation prop, communicating a thematic break to assistive technology.
Don’t use a Separator purely for decorative purposes — use CSS spacing instead so assistive technology users aren’t given false structural cues.