Updated
Badge
Badge is a small marker for a count, a status word or presence, attached to the thing it describes.
Updated
Preview
A compact marker that attaches to something else. Pill carries a label, Circle a count, Dot presence.
Pill is 24 high with a Semi Bold label, and a Dot property puts a 6 point leading dot in front of the label, which turns the Pill into a status word. A Color badge carries the dropShadow/xs effect and a Soft badge carries none.
Source: the Badge page of the Appetite UI Figma file, read on October 2, 2026.
Which types does Badge have?
Badge has three types, all at radius full. Pill hugs its label, Circle is pinned square at 20 and Dot drops the label for a 6 mark.
Pill is 24 high with padding 4 and 10 and a gap of 6, so its width is the label plus 20: 34 for a two digit count. Dot is 6 by 6 and has no text.
Circle is a 20 by 20 box at padding 2 and holds two digits without clipping. A third digit does not fit, so above 99 switch to a Pill and print 99+.
The label is Inter Semi Bold 12 on a 16 line at 0.1 tracking, the text style xs/emphasized.
Which states does Badge have?
Badge has ten states, each mapped to a token family, with Neutral on the faded family. Color fills with base-500 under a white label, and Soft fills with lighter-50, an alpha tint in dark, under a dark-950 label.
Cells read in the order named above, five to a row, each with a Color pill, a Soft pill and a Dot.
Neutral reads the faded family: a Neutral Color pill is state/faded/base-500, and a Neutral Soft pill is state/faded/lighter-50 under a state/faded/dark-950 label. The Neutral Dot leaves the family, bg/strong-950 in Color and bg/soft-100 in Soft.
Every other family paints Type Dot in Soft with light-200, because lighter-50 disappears at 6.
In dark, lighter-50 and light-200 are alpha tints of the hue at 16 and 24 percent, so a Soft badge sits translucent over whatever it is pinned to.
How do I show a status with Badge?
Use Type Pill and switch Dot on: the dot carries the state color and the label says the word. Soft is the quiet version, Color the loud one.
A Pill with Dot shows a status word, a Pill or Circle without it shows a count, and Dot alone marks presence. The Label property takes the word, and the pill hugs it.
Keep the word to one or two.
What is Overlay for?
A label for photography: a place, a duration, a photo count. Overlay carries information, never a status.
Overlay is its own set, Badge / Overlay, with Size sm and md, an Icon variant, a Label property and a Trailing boolean for a chevron. Sm is 28 high at padding 6 and 10 with icons at 14, md is 36 high at padding 8 and 14 with icons at 16.
The fill is bg/scrim as a paint at 42 percent over a 16 background blur (backdropBlur/md), with a 1 point glass/border stroke. The label and both icons are static white in light and dark, so the badge reads on any photo.
Properties
Three variant axes and two properties on the Badge set. The Overlay set has its own two axes and three properties.
| Property | Type | Default |
|---|---|---|
State | Neutral, Information, Error, Warning, Away, Success, Feature, Verified, Highlighted, Stable | Neutral |
Type | Pill, Circle, Dot | Pill |
Style | Soft, Color | Soft |
Label | Text, Pill and Circle only | 12 |
Dot | Boolean, Pill only | false |
| Property | Type | Default |
|---|---|---|
Size | sm, md | sm |
Icon | True, False | False |
Label | Text | Label |
Icon Swap | Instance swap | clock |
Trailing | Boolean | false |
Trailing Swap | Instance swap | chevron-down |
A Dot type has no text node, so the Label does nothing there.
Badge ships 60 variants: 10 states by 3 types by 2 styles, with no holes. Overlay adds four more on its own set.
Tokens
Each state reads its roles from its own family, and Success stands in for the other eight. Neutral and Overlay follow below.
| Token | Light | Dark | Applied to |
|---|---|---|---|
state/success/base-500 | #22C55E | #16A34A | Color fill, and the Soft leading dot |
text/on-color/strong | #FFFFFF | #FFFFFF | Color label and leading dot |
state/success/lighter-50 | #F0FDF4 | #22C55E at 16% | Soft fill of Pill and Circle |
state/success/dark-950 | #09361B | #86EFAC | Soft label |
state/success/light-200 | #BBF7D0 | #22C55E at 24% | Soft fill of Type Dot |
state/faded/base-500 | #8E8E93 | #636366 | Neutral Color fill |
state/faded/lighter-50 | #F4F5F5 | #6A7282 at 16% | Neutral Soft fill |
state/faded/dark-950 | #0E0E0F | #C7C7CC | Neutral Soft label |
bg/strong-950 | #0E0E0F | #FFFFFF | Neutral Type Dot in Color |
bg/soft-100 | #E9E9EA | #48484A | Neutral Type Dot in Soft |
bg/scrim | #000000 at 40% | #000000 at 48% | Overlay fill, as a paint at 42% |
glass/border | #FFFFFF at 50% | #FFFFFF at 12% | Overlay stroke |
static/static-white-0 | #FFFFFF | #FFFFFF | Overlay label and icons |
Radius is dimensions/radius/full on every type, and the Color style adds the dropShadow/xs effect style. Swap success for any of the other eight families and the roles hold.
How does Badge differ on iOS and Material 3?
Both platforms draw a badge as a count on a tab item or an icon. Appetite UI Badge adds a status pill with a dot and an Overlay for photos, and the file draws no iOS or Material 3 Badge to compare.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Badge, Circle and Pill | The badge on a tab item or a list row, set with the SwiftUI badge modifier or the UIKit badgeValue of a tab item | The Material 3 Badge, a small dot or a large badge with a number | Appetite UI draws a Circle at 20 by 20 and a Pill at 24 high on every platform. |
| Badge, Pill with Dot | None. iOS has no status pill. | None. Material 3 marks status with a Chip or text. | Appetite UI adds a 6 point leading dot and a Soft style so a status word reads without a filled block. |
| Badge / Overlay | None | None | A scrim label for photography. Neither platform names one. |
A badge is not a control, so it has no touch target of its own. The control it sits on keeps the minimum of 44 pt on iOS and 48 dp on Material 3, set by platform/min-touch-target in the Platform collection.
Which Badge type should I use?
Use a dot for presence, a circle for a count and a pill with a dot for a status word.
Do
Pick the type by what you have to say. A dot means something is there, a circle how many, a pill with a dot what it is.
Don't
Do not run a sentence through a badge, or stack three of them. At 24 high it marks something else and is not a label of its own.
Pin a badge to the thing it describes. If what you have to say is a sentence, use a Chip or an Alert.
Never let color carry the meaning alone: the label or the control name must say it too.
For text at 12, prefer Soft. White on a Color fill reaches 4.5 to 1 only for Information (5.3) and Feature (4.8) in light, while every Soft pair measures at least 8.6 in light and 6.8 in dark.
Contrast computed on October 2, 2026 from the resolved token values, with a Soft tint taken over bg/white-0.