Scale — Divider

Install

Examples

Variants

default is a standard border; subtle recedes into the background; and selected uses the brand accent for an active boundary.

In context

A divider spans the full width of its container — drop it between stacked content to mark a boundary.

Account settings

Notifications

Billing

Guidelines

Usage

section separators, boundaries between list or menu items, and grouping cues inside a Card. When you only need whitespace, use spacing instead of a line.

Do

Use subtle for quiet separators within a surface.
Reserve selected for an active or highlighted boundary.
Let the divider fill its container; control width via the parent.

Don’t

Don’t stack dividers and heavy spacing — pick one separation cue.
Don’t use a divider where a heading or whitespace would group content more clearly.
Don’t rely on a divider to convey meaning that needs a label.

Accessibility

Role: defaults to role="separator" so assistive tech announces the boundary.
Decorative use: if the line is purely visual, override with role="presentation" so it’s ignored.
Contrast: subtle is intentionally low-contrast — don’t depend on it as the only signal that content is grouped.
Orientation: the divider is horizontal; for vertical separation, lay out with borders or spacing on the parent.

Properties

Card — dividers separate sections within a card.
Menu — separates groups of menu items.
Row — list rows that may carry their own divider.

Divider