Separator

A thin rule that divides content along one axis. By default it is semantic (role="separator" with aria-orientation); pass decorative for a purely visual divider (role="presentation", hidden from assistive tech). A horizontal separator can carry a centered label. All color comes from var(--border).

Horizontal (default)

Section one

Section two

Horizontal — labeled

Continue with single sign-on

Vertical

Docs

Components

Tokens

Decorative (hidden from assistive tech)

This divider repeats a visible grouping

so it carries no semantics