Skip to content

role presentation

Divider draft v0.1.0

A thin line that separates two groups of content.

A divider is a hairline between two sections of content or two groups of controls: between items of a list, between a header and a body, between the actions of a toolbar. It is horizontal by default and vertical inside a row. A divider says that a topic or a group changes; spacing alone often says it as well, so a divider is used when the separation must be seen.

Decisions

From decisions in packages/components/specs/components/divider.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

  • The divider is a 0.6 px line (stroke-width.sm) in the fourth neutral base border color (global.border.base.neutral.4), in every mode.

    The Figma library's level edge borders are made for the edges of surfaces; the base neutral border is visible on the default surface without competing with text.

    hairline · 2026-10-03 · v0.1.0

    divider.container.colordivider.container.border-width

Layout

  • A horizontal divider has 16 px of space above and below; a vertical one 16 px before and after, and is at least 24 px high when its row does not stretch it.

    orientation-spacing · 2026-10-03 · v0.1.0

    divider.container.margin-block.*divider.container.margin-inline.*divider.container.min-height.*

Accessibility