Skip to content

Separator

A hairline between groups of content, optionally with a short label such as "or".

alphaReact AriaSource
Claim CLM-20931Outpatient · Submitted 12 Sept
DetailsDocumentsPayments

Installation

pnpm add @syntara/react @syntara/tokens
import { Separator } from '@syntara/react';

Usage

import { Separator } from '@syntara/react';

export function Sections() {
  return (
    <>
      <p>Personal details</p>
      <Separator />
      <p>Bank details</p>
    </>
  );
}

Examples

With a label

An "or" divider between two ways to sign in.

or

Accessibility

No keyboard interaction of its own.

  • role="separator" (an <hr> when horizontal); vertical separators get aria-orientation="vertical".
  • A labelled separator is a plain group with visible text and aria-hidden hairlines.

Guidelines

Do

  • Use spacing first; add a separator only when groups would otherwise run together.

Don’t

  • Don't use separators for decoration inside dense lists; use row borders.

API reference

Separator

orientation
  • horizontaldefault
  • vertical

Vertical separators stretch to the height of their flex row.

label
ReactNode

Text in the middle of a horizontal rule. The result is read as its text, not as a separator.

elementType
string

Element to render (React Aria). Horizontal defaults to <hr>.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour3
border.defaultborder.subtletext.subtle
Type3
font.size.xsfont.weight.mediumline-height.snug
Space and size1
space.3