--- url: /components/badges/guidelines.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](specs.md) · **Guidelines** · [Accessibility](accessibility.md) ![Diagram of 4 badges in different configurations on a navigation bar's destination icons.](/assets/c317916b-mg0wmkr4-01.D_dIZiLs.webp) Large badges and a small badge in a navigation bar ## Usage Badges are used to indicate a notification, item count, or other information relating to a navigation destination. They are placed on the ending edge of icons, typically within other components. There are two variants: 1. Small badge 2. Large badge ![Diagram of 4 badges in different configurations on a navigation bar's destination icons.](/assets/623985f9-mg0wmphl-02.C8k1etNB.webp) Navigation bar with four badges A **small badge** is a simple circle, used to indicate an unread notification.

 A **large badge** contains label text communicating item count information. ![A small badge is a circle with no characters.](/assets/83bc6d64-mi46ui92-03.D9mT_TQp.webp) Small badge ![A large badge holds 4 characters and expands its container's width but not height.](/assets/d928d9d8-mi46uzu8-04.1Ki3H6jH.webp) Large badge ### With other components Badges are most commonly used within other components, such as [navigation bar](../navigation-bar/overview.md "Navigation bars let people switch between UI views on smaller devices."), [navigation rail](../navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices."), [app bars](../app-bars/overview.md "App bars display navigation, actions, and text at the top of a screen."), and [tabs](../tabs/overview.md "Tabs organize content across different screens and views."). ![Navigation bar with 3 icon buttons. 2 icons buttons have badges and 1 doesn't.](/assets/6cc3ea75-lvm8dp3k-5.DHdbvu3L.webp) In navigation bars, hide the badge once the destination has been selected ## Anatomy ![Small and large badges on 2 icon buttons.](/assets/fa45a9bc-lvm8fkil-7.CXw9wZOL.webp) 1. Small badge 2. Large badge container 3. Large badge label ## Container There are two container options for the badge:  * Small badge with no text * Large badge with text ![A small badge on a navigation item.](/assets/ce3e8dc8-mg0womos-07.x3X_eh_L.webp) A small badge uses only shape to indicate a status change or new notification ![Number 10 displayed within large badge on a navigation item.](/assets/3fa2a5c6-me8jybps-08.DR-tx7Tx.webp) A large badge displays a number within a container to indicate a quantifiable status change related to a destination Badge containers are anchored inside the icon bounding box. As the number count increases for large badges, their width expands, but keeps the same placement. Badges use a color intended to stand out against labels, icons, and navigation elements. Use the default color mapping to avoid color conflict issues. ::: tip Do ![Small and large badges on the left side of 2 navigation items in a right-to-left language.](/assets/d1c5a05f-me8k2962-9-do.DogozEz8.webp) Change the position of the badge for right-to-left languages ::: ::: danger Don't ![Small and large badges at random positions on 3 icon buttons on a navigation rail.](/assets/1629c052-me8k2vet-10-dont.gX0tZgin.webp) Badges have fixed positions. Don’t change the position of the badge arbitrarily or place the badge over the icon. ::: ::: tip Do ![Small and large badges in default red color on 3 navigation items.](/assets/a4de9b06-mg0wr0gz-11_do.CYuWU0BR.webp) Use the default badge color ::: ::: danger Don't ![Small and large badges in custom colors on 3 navigation items.](/assets/6960af42-mg0wr4mw-12_dont.DnImN-vc.webp) Avoid using custom color roles for the badge container and label text. If custom roles are necessary, make sure they have contrast of at least 3:1. ::: ### Label text Label large badges with counts or a status. The maximum number of characters within large badge label text is four, including a + to indicate more. ![4 icons with increasing number badges. The badges represent quantities, using a "+" symbol for quantities over 999.](/assets/644b8448-me8ks60f-13.8LxtWc8F.webp) Large badges with one to four characters Use the recommended maximum character count to ensure labels don’t extend beyond the badge container. ::: tip Do ![4-digit numbers condensed to a 3-digit badge with "+" to fit the badge container's width.](/assets/52f06e5b-mg0wrqi2-14_do.tXVx0FaT.webp) Truncate badge labels as needed ::: ::: danger Don't ![4-digit and 5-digit number badges on navigation items exceed the badge container's width and get cut off at the edge.](/assets/b2e48c50-mg0wru4w-15_dont.DjF5MnfV.webp) Don’t let the badge get cut off or collide with another element ::: ## Placement ::: tip Do ![Large badge to the right of a navigation rail item.](/assets/5ec74bca-mg0wsl1o-16_do.D-M58iyn.webp) Use a large badge to show count information when visual collisions aren’t an issue, such as in a navigation rail ::: ::: warning Caution ![Small badge on an icon button in an app bar.](/assets/e51ba43f-me8kxkle-17_caution.3XAtrek4.webp) Use a small badge when spaces are tightly constrained, such as app bars. Small badges won’t run into the edge of the screen. ::: ::: tip Do ![Large badge placed at the end of a tab.](/assets/e822e324-me8kyp7i-18_do.DFbQd1bY.webp) When an icon with a badge is followed by text or another element, place a large badge at the trailing edge ::: ::: danger Don't ![Large badge overlapping the icon and text in a tab.](/assets/9f4402fc-me8kzbcm-19_dont.BcSdqWU9.webp) Avoid using a large badge when it might overlap with a trailing element. Either place it at the trailing edge or use a small badge instead. :::