Badges

Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers.

Overview · Specs · Guidelines · Accessibility

Navigation bar

1. Small badge
2. Large badge container
3. Large badge label
4. Large badge maximum character count container
5. Large badge maximum character count label

Navigation rail

1. Small badge
2. Large badge container
3. Large badge label
4. Large badge maximum character count container
5. Large badge maximum character count label

Tokens & specs

Browse the component elements, attributes, tokens, and their values.

Design tokens

Token table

Machine-readable relationship table

Badges tokens · 1 token set · 13 tokens · live token table · DSDB TOKEN_TABLE.59a1b3a9a90ca8b3

• Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Badges · md.comp.badge · 13 tokens

For badges.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.badge.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Enabled › Container	md.comp.badge.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › Container	md.comp.badge.size	Length	—	6dp	—
Enabled › Container	md.comp.badge.large.color	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Enabled › Container	md.comp.badge.large.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › Container	md.comp.badge.large.size	Length	—	16dp	—
Enabled › Label text	md.comp.badge.large.label-text.color	Color	md.sys.color.on-error → md.ref.palette.error100	#FFFFFF	Dark: #601410 via md.ref.palette.error20
Enabled › Label text	md.comp.badge.large.label-text.font	Font names	md.sys.typescale.label-small.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.badge.large.label-text.line-height	Line height	md.sys.typescale.label-small.line-height	16pt	—
Enabled › Label text	md.comp.badge.large.label-text.size	Font size	md.sys.typescale.label-small.size	11pt	—
Enabled › Label text	md.comp.badge.large.label-text.tracking	Font tracking	md.sys.typescale.label-small.tracking	0.5pt	—
Enabled › Label text	md.comp.badge.large.label-text.weight	Font weight	md.sys.typescale.label-small.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.badge.large.label-text.type	Typography	composite font names: md.comp.badge.large.label-text.font → md.sys.typescale.label-small.font → md.ref.typeface.plain font weight: md.comp.badge.large.label-text.weight → md.sys.typescale.label-small.weight → md.ref.typeface.weight-medium font size: md.comp.badge.large.label-text.size → md.sys.typescale.label-small.size line height: md.comp.badge.large.label-text.line-height → md.sys.typescale.label-small.line-height font tracking: md.comp.badge.large.label-text.tracking → md.sys.typescale.label-small.tracking	Roboto · weight 500 · size 11pt · line height 16pt · tracking 0.5pt	—

Color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. Learn more about design tokens

Badge color roles used for light and dark schemes in navigation bar:

1. Error
2. Error
3. On error
4. On error
5. Error

Badge color roles used for light and dark schemes in navigation rail:

1. Error
2. On error
3. Error
4. On error
5. Error

Measurements

Badge padding and size measurements

Attribute	Value
Small badge shape	3dp corner radius
Small badge size (HxW)	6dp
Large badge shape	8dp corner radius
Large badge one digit size (HxW)	16dp
Large badge max character count size (HxW)	16x34dp
Small badge: distance from top trailing icon corner to bottom leading badge corner (HxW)	6x6dp
Large badge: distance from top trailing icon corner to bottom leading badge corner (HxW)	14x12dp
Large badge padding between badge and text container	4dp

Configuration

Different badges are shown on navigation destinations in various states.

1. Inactive with label - small badge
2. Inactive with label - large badge
3. Inactive with label - large badge max character count
4. Inactive - small badge
5. Inactive - large badge
6. Inactive - large badge max character count
7. Active with label - small badge
8. Active with label - large badge
9. Active with label - large badge max character count
10. Active nav bar no label - small badge
11. Active nav bar no label - large badge
12. Active nav bar no label - large badge max character count
13. Active nav rail no label - small badge
14. Active nav rail no label - large badge
15. Active nav rail no label - large badge max character count