Divider
Divider separates content into groups with a single line.
Preview
A visual separator, the smallest component in the system. One colour, one weight, three shapes. On iOS this is Divider; on Android HorizontalDivider and VerticalDivider.
The frame measures 4 and the line measures 1: in Figma the line is a LINE of height 0 with the stroke drawn outside it, and 2 of padding sits above and below.
Style
Three shapes on one axis. Horizontal rules off a block, With Label carries a word between two options, Vertical splits items sitting on one line.
With Label splits the 342 into 153, the label, 153, with 12 of gap on each side. The label is the only part that is not the line colour: it takes text/soft-500 where the line takes border/soft-100.
In use
Each style exists for one job. Seen on its own a divider is a grey line; seen in place it is the reason two things read as separate.
The component's own description names a fourth style, Inset, for a list with a leading avatar. The set does not ship it, and it calls the first style Horizontal where the description calls it Full Width.
Properties
One axis and one text field. Nothing else is exposed, and nothing else needs to be.
The width is fixed at 342 on both horizontal styles, which is a 390 screen less 24 of side margin on each edge. Set it to fill in your own layout; nothing in the component depends on the number.
Tokens
Two values for the whole component. There is no second colour, no weight scale and no emphasis variant.
The label runs on typography/fontSize/xs 12, typography/lineHeight/xs 16 and typography/letterSpacing/wide .1 at the default weight. Geometry runs on dimensions/spacing/0-5 2, dimensions/spacing/3 12 and dimensions/spacing/6 24.
Guidelines
Use it where spacing alone stops doing the work: rows of the same weight, or two options that need a word between them.
Do not rule off every element. A divider after each row, plus one under the last, turns a list into a table nobody asked for.
A section that already sits on its own card does not need a divider above it. The card edge is the separation.