Badges

Badges help highlight important information, such as notifications or new and unread messages.

default size default color badge


Usage

  • There are different types of badges available to use, depending on the context, as shown in the image above. You won't always need a badge to identify a number. In those cases plain text is an option.
  • Badges are only used for integers.
  • Badges can not be used as a close button or a link to another a page. They are only used as informative text.
  • Badges don't always indicate the exact number of elements. When this is the case, please use plain text instead. Badges work for exact numbers up to 999. For numbers greater than 999, use K to indicate Thousands (5K for 5.231) and M to indicate Millions (2M for 2.100.523).
  • The Red badge is only used for the cases below: Notifications: These are always placed nearby a user profile or a Product menu option. Errors: These are used in tables and lists.
  • Badges are not used for non-numeric values. If you have a non-numeric value, use labels instead.
  • Badges have circular borders.

See the colors page to learn more about color definitions.


Behavior

Badges can be placed near text, but there must be a minimum distance of 8px between the two. It can also be used paired with buttons or high level navigation to show the amount of updated information.

badge distance to an element is 8 pixels


Attributes

badge metrics

  • Height: 20px
  • Font-size: 12px
  • Border-radius: 8px

CSS:

height: 20px;
border-radius: 8px;
background: #d73030;
font-size: 12px;