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.
No token matches.
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
|