Skip to content

Documentation

Separator

Separator is the visual division primitive for horizontal and vertical boundaries between adjacent UI regions.

Storybook Source Figma

Profile

Billing

Security

AnnouncementFocus the demo to see what it exposes.

Labeling

Separator is usually unlabeled and decorative.

Keyboard Behavior

Separator has no keyboard behavior.

Focus Behavior

Separator is not focusable.

The component renders with role='separator'.
It communicates structural separation, but not a named region or heading.

Form Semantics

Separator can visually divide form sections, but it does not replace Fieldset or FieldsetLegend.

Accessibility Risks

using only a separator where a heading or legend is needed
rendering decorative dividers so frequently that they add noise without structure