COMPONENTS

Badge

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

badges-intro

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

badges-anatomy
  1. Label
  2. Container

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

badges-type-label

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.

badges-color

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

badges-status

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.

badges-sizes

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

badges-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.
  • Labels should be in all caps.
  • Label text should not wrap.
badge-do

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

badge-dont

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