--- url: /components/badges/specs.md description: >- Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers. --- # Badges Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers. [Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md) ![5 aspects of badge anatomy on a navigation bar.](/assets/b6164bd0-mamlcpos-1-3p.CKyA4DLY.webp) 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 ![5 aspects of badge anatomy on a navigation rail.](/assets/f055cc67-mamlee0o-2-3p.Du7xdcn7.webp) 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. ::: token-table token-table-59a1b3a9a90ca8b3-d856473e **Badges tokens** · 1 token set · 13 tokens · [live token table](https://m3.material.io/components/badges/specs) · 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](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). 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](../../foundations/design-tokens/overview.md) ![5 applications of badge color on light and dark theme navigation bars.](/assets/918a3e67-mg0yc68n-03-3p.BA8OWUaq.webp) Badge color roles used for light and dark schemes in navigation bar: 1. Error 2. Error 3. On error 4. On error 5. Error ![5 applications of badge color on light and dark theme navigation rails.](/assets/51fb42a4-lz9ep1tz-4.QjwNyZik.webp) 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 ![Annotation of badge sizes, padding, and measurements from the corner of the icon to the badge opposite corner.](/assets/1d4a9ed8-lz9eqf8f-badge_layout-correct.Dah91xCN.webp) 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.](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") ![Diagram of 3 badge variations shown on navigation destinations in various states.](/assets/a8e3a4ad-lz9eqsps-6.Bg0ymX5A.webp) 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