Skip to main content

Badge

A badge is a small graphical element used to display a numeric value or count.

Do's and don'ts

Do
  • Badges are usually placed before or after the label of the thing they're quantifying.
  • Use multi-digit variant for numbers greater than 10.
Don't
  • Don't use for alphanumeric content — use the Tag component.

Anatomy

Example of a badge component anatomy.
  1. Label: Numeric informative information to the user.
  2. Container: Background container that organises the information.

Variants

Brand

Example of the badge in the default variant.

Primary

Example of the badge in the primary variant.

Secondary

Example of the badge in the secondary variant.

Inverse

Example of the badge in the inverse variant.

Size

Outlines the badge sizes that we use, and where they should be used across our products.

ExampleSizeHeightNotes
XLargeXLarge40pxAvailable for all types.
LargeLarge32pxAvailable for all types.
MediumMedium24pxAvailable for all types.
SmallSmall16pxAvailable for all types except for Brand as it is not accessible.

Behaviour

If the user has control over changing the Badge's quantity, and changes from '9' to '10' the width of the container will grow to accommodate the wider content.

Example of the badge behaviour when the quantity changes.

Content

  • Content should be single-digit or multi-digit number.
  • It doesn't accept decimal numbers. The number should be always rounded up.
  • It doesn't accept special characters.
  • In certain use cases, it accepts up to one character that supports the numeric value, but the character cannot be used on its own.
Example of badge content guidelines.

States

Each variant of the badge has two states: default and disabled.

Brand

Default

Example of the badge brand variant in the default state.

Disabled

Example of the badge brand variant in the disabled state.

Primary

Default

Example of the badge primary variant in the default state.

Disabled

Example of the badge primary variant in the disabled state.

Secondary

Default

Example of the badge secondary variant in the default state.

Disabled

Example of the badge secondary variant in the disabled state.

Inverse

Default

Example of the badge inverse variant in the default state.

Disabled

Example of the badge inverse variant in the disabled state.

Narrow

Narrow variants use Narrow tokens for text. Narrow text tokens are smaller than wide and are suitable for smaller screens.

Example of the badge narrow variant.

Examples

Potential use-cases for the component.

LTR examples

Here are some examples of the badge in left-to-right context:

Example of a badge used on a button in a left-to-right context.
Example of a badge used on an icon button in a left-to-right context.
Example of a badge used on a list item in a left-to-right context.
Example of a badge used on a card in a left-to-right context.
Example of a badge used on a stepper in a left-to-right context.
Example of a badge used on tabs in a left-to-right context.

RTL examples

Here are some examples of the badge in right-to-left context:

Example of a badge used on a button in a right-to-left context.
Example of a badge used on an icon button in a right-to-left context.
Example of a badge used on a list item in a right-to-left context.
Example of a badge used on a card in a right-to-left context.
Example of a badge used on a stepper in a right-to-left context.
Example of a badge used on tabs in a right-to-left context.
Back to top