---
url: /components/badges/overview.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** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Badges](/assets/2f85757a-mrokq7vv-badge.KqZLhQxq.webp)

* Can contain labels or numbers
* Two variants: small and large
* Anchor badges inside the icon bounding box, at the upper trailing edge of the icon
* Limit content to four characters, including a **+**
* Keep the default color mapping

![3 icons with badges. 1 is a small dot. 2 is a larger circle with a 1 digit number. 3 is an oval with a 4 digit number.](/assets/e180b284-me8hopxl-01.DzqNRqj7.webp)

1. Small badge on a navigation item
2. Large badge on a navigation item
3. Large badge with max characters on a navigation item

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/Badge-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/badges) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/BadgeDrawable.md) | Available |
| Implementation | Web | Unavailable |

## Differences from M2

* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")

![Navigation bar showing 4 icons with different badge variants in a bright red color.](/assets/005100f8-me8hz0r2-02.CcuMTIG3.webp)

Badges have new color mappings