Divider
A divider is a thin line that separates items or groups of content. iOS calls it a separator, in lists and as a Divider view, and Material 3 has the divider with a 1 dp regular and an 8 dp heavy weight.
Why it matters
A divider is the cheapest way to show where one thing ends, but every line adds noise. Spacing and grouping often separate better, so a divider is a choice and not a default.
Thickness and color are tokens, so the same line can follow a theme.
Divider on iOS and Android
Also called Separator, Hairline. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Separator and Divider | Divider: full width, inset | Divider |
| Thickness (Material Components) | Hairline set by the system | 1 dp regular, 8 dp heavy | See below |
| Insets (Material Components) | List separators inset to the text | Start and end inset, 0 dp by default | See below |
In Appetite UI
Divider draws one line weight in border/soft-100 on both platforms, horizontal and vertical, and a With Label style that has no native counterpart. The separator token is the same in light and dark.
Example
A settings list uses a hairline between rows, inset to the text, and nothing between the groups, where a gap does the work.
Common mistakes
- A line between every item when spacing would do.
- Using a heavy divider as a section header. Use a header.
- A hard-coded gray. Bind to the border token so dark mode follows.
- Full-width lines in a list with leading icons. Inset them to the text.
Questions
Does iOS have a divider?
Yes: list separators, and a Divider view in SwiftUI. Appetite UI draws one line for both platforms.
How thick is a Material 3 divider?
1 dp for the regular divider and 8 dp for the heavy one, in Material Components for Android, with optional start and end insets.
Sources
The pages the facts above rest on, each read October 30, 2026.