Badge

Badges show notifications, counts, or status information.

When to use

To indicate a count

Use badges to indicate a notification or number count

To indicate a count

Use badges to indicate a notification or number count

To show status

Use badges to show the current state of an item

To show status

Use badges to show the current state of an item

When to avoid

Long values

Since badges are used to quickly indicate a count or a brief message, it is best to find another method if you have to support long values.

Long values

Since badges are used to quickly indicate a count or a brief message, it is best to find another method if you have to support long values.

Specifications

Size

Default

Large

Default

Large

Default

Large

Default

Large

Content

Message

A badge with a message shows a non-interactive label used to highlight an item's status, attribute, or category.

Counter

A counter badge is a small, non-interactive visual indicator that displays a number.

Message

A badge with a message shows a non-interactive label used to highlight an item's status, attribute, or category.

Counter

A counter badge is a small, non-interactive visual indicator that displays a number.

Message

A badge with a message shows a non-interactive label used to highlight an item's status, attribute, or category.

Counter

A counter badge is a small, non-interactive visual indicator that displays a number.

Message

A badge with a message shows a non-interactive label used to highlight an item's status, attribute, or category.

Counter

A counter badge is a small, non-interactive visual indicator that displays a number.

Styles

Primary

Background

Alert

Success

Primary

Background

Alert

Success

Primary

Background

Alert

Success

Primary

Background

Alert

Success

Anatomy

Label

The label content can be either numerical or text. If numerical, use the padding-false prop which removes the horizontal space for a tighter, more optically balanced look around the numbers.

Container

Contains the numerical or text value. Offers a default and large size which alters the vertical-padding.

Value

Badge

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing