---
title: Divider
description: Divider separates content into groups with a single line: horizontal, with a label, or vertical. Appetite UI component for Figma, iOS and Android.
group: Components
source: https://www.appetiteui.com/docs/divider
dateModified: 2026-10-03
---

# Divider

Updated: October 3, 2026.

Divider separates content into groups with a single line. Use it where spacing alone stops doing the work.

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

Specimen: Divider, Style Horizontal. 342 x 4, a 1px line with 2 above and below.

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.

Specimen: Style Horizontal, With Label, Vertical. 342 x 4, 342 x 16, 1 x 24.

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.

Specimen: Horizontal between rows, With Label between actions, Vertical in a meta line. the blocks around them are stand-ins, not Button.

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.

- Avoid: 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.

## In the screens and the glossary

- Screens: [Sign in and sign up screens](https://www.appetiteui.com/screens/patterns/sign-in)