A badge is a highly visual way to draw attention to content.


Badges help to categorize information, spotlight a notification, or indicate status.

  1. Label
  2. Container

There are three core types of badges — basic, inline and overlay.


Badge has three types of emphasis — bold, subtle, or outlined, with bold being the default.

Within each emphasis type there are 13 color options — gray, red, orange, yellow, lime, green, teal, turquoise, aqua, blue, ultramarine, purple, and pink.


Badge has five display options to indicate status — none, error, warning, information, success.


Badge overlay can be positioned relative to another component. The available positions are top right, bottom right, top left and bottom left. Badge overlay is typically paired with Icon or Button.

Badge overlay position

Badge has two shapes — square and rounded.

Badge Shape

Uppercase is the preferred text style, but apps can customize based on their use case.

Badge text case

Badge can be displayed in large, medium, small and x-small sizes.

  • Users cannot interact with badges. If interaction is desired, use a Tag.
  • Only include one label per badge.
  • Keep label text concise and unambiguous.

DO: Use a limited color palette to help to reinforce meaning and highlight important status information.


DON'T: Use too many colors in one interface. It negates the effectiveness of a badge and creates visual noise.