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.

Tokens

From packages/tokens/src/components/divider.tokens.json. Path grammar: divider.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.

5 tokens

Part container (5)

Token Type Value Resolved CSS
divider.container.color color {global.border.base.neutral.4}
light #B6B4B4
dark #363636
--divider-container-color
divider.container.border-width dimension {stroke-width.sm}
0.6px
--divider-container-border-width
divider.container.margin-block.horizontal dimension {space.16}
16px
--divider-container-margin-block-horizontal
divider.container.margin-inline.vertical dimension {space.16}
16px
--divider-container-margin-inline-vertical
divider.container.min-height.vertical dimension {space.24}
24px
--divider-container-min-height-vertical