Updated
Divider
Divider separates content into groups with a single line. Use it where spacing alone stops doing the work.
Updated
Preview
A visual separator, the smallest component in the system: one color, one weight, three shapes. On iOS this is Divider, on Android HorizontalDivider and VerticalDivider.
The frame measures 4 and the line measures 1, with 2 of padding above and below it.
Which Divider styles are there?
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 color: it takes text/soft-500 where the line takes border/soft-100.
Where does each Divider style belong?
Each style exists for one job. Seen on its own a divider is a gray line, seen in place it is the reason two things read as separate.
The set has no Inset style for a list with a leading avatar. Start the line past the avatar in your own layout, as a layout choice.
How does Divider differ on iOS and Material 3?
Neither platform has a standalone divider component in the Figma file, and native lists draw their own separators. Compose has HorizontalDivider and VerticalDivider, SwiftUI has Divider.
| Appetite UI component | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Divider, Horizontal 342 x 4 and Vertical 1 x 24 | SwiftUI Divider and list separators | Compose HorizontalDivider and VerticalDivider | Same job on every platform. Appetite UI draws one line weight in border/soft-100 on both |
| Divider, With Label 342 x 16 | No counterpart | No counterpart | A word between two options has no native component, so this style is Appetite UI's own |
A divider is decorative, so no touch target applies. Mark it as a separator for assistive technology only when it separates groups a reader moves between, and leave it out of the reading order when it is purely visual.
The line, border/soft-100 on white, is meant to be quiet and is not a contrast carrier: never use it as the only cue that two things are different.
Properties
One axis and one text field, and nothing else is exposed.
| Property | Type | Default |
|---|---|---|
Style | Horizontal, With Label, Vertical | Horizontal |
Text | Text, With Label only | or |
| Style | Size | Built from |
|---|---|---|
| Horizontal | 342 x 4 | 2 of padding, a 0 tall line, 2 of padding |
| With Label | 342 x 16 | 153, gap 12, the label, gap 12, 153 |
| Vertical | 1 x 24 | the same line, rotated, length 24 |
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 color, no weight scale and no emphasis variant.
| Token | Light | Dark | Applied to |
|---|---|---|---|
border/soft-100 | #E9E9EA | #2F2F31 | Every line, all three styles |
text/soft-500 | #8E8E93 | #AEAEB2 | The label on With Label |
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.
The label, text/soft-500 on white, measures 3.26 to 1, so give a label that carries meaning 4.5 to 1 in your product. A divider takes no focus, and the 44 pt target applies to the controls on either side of it.
Guidelines
Do
Use it where spacing alone stops doing the work: rows of the same weight, or two options that need a word between them.
Don't
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.