# Badges > Notifications, counts, or status on navigation items and icons. ## Anatomy Badges show notifications, counts, or status information on navigation items and icons. They can hold a label or a number. Two variants: **small** (an empty ``, a 6dp dot) and **large** (text inside, a 16dp stadium). Nest the badge in the icon so it anchors at the upper trailing edge of the 24dp glyph. Limit content to four characters, including `+`. The default mapping is `error` / `on-error`. Pair a fill utility with its `on-*` text class only if you override it. Label Label Label ``` mail mail1 mail999+ ``` ## Small Leave the badge empty. It is a 6dp circle with no label — an unread mark, not a count. notifications ``` notifications ``` ## Large Put a number or short label in the badge. Height is 16dp, corners are a stadium, inset is 4dp. Cap the string at four characters; use `999+` when the count is larger. mail1 mail999+ ``` mail1 mail999+ ``` ## On navigation A destination can nest the badge in the icon, or keep it as a sibling after the label — the bar and rail position that sibling on the icon’s upper trailing corner. Tabs nest it in the icon. inbox3 Inbox Chat Groups ``` Inbox ``` ## In a list A trailing `.badge` in a list or drawer row stays in flow on the end, as a count, not overlapped on the leading icon. - Inbox 3 - Sent ``` ``` ## In a navigation drawer Put a badge on a `summary` or a destination. Nested sections are native `
`. - Inbox 4 - Primary1 - Social - Sent ``` Inbox 4 ``` ## Color Default is `error` / `on-error`. Override with a fill + `on-*` pair when the badge is not an error/notification. mail3 ``` 3 1 ```