# 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.

Page: https://www.appetiteui.com/glossary/divider. Divider and list separator on iOS and Material 3. Also called Separator, Hairline.

## 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.

## iOS and Android

|  | iOS | Android (Material 3) | 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

1. [Material Design 3: Divider](https://m3.material.io/components/divider/overview)
2. [Material Components for Android: Divider](https://github.com/material-components/material-components-android/blob/master/docs/components/Divider.md)
3. [Apple Human Interface Guidelines: Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables)

## Related

- Docs: [Divider](https://www.appetiteui.com/docs/divider)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Glossary: [List row](https://www.appetiteui.com/glossary#list-row)
- Glossary: [Spacing scale](https://www.appetiteui.com/glossary/spacing-scale)
- Glossary: [Semantic tokens](https://www.appetiteui.com/glossary/semantic-tokens)