Badge

Badges show notifications, counts, or status information on navigation items and icons

Link to Badge component in Figma

Badge

Badges are used to indicate a notification, item count, or other information relating to a navigation destination.

They can be paired with Avatars and Icons.

Different examples and use cases for Badge

Color variants

Badge has two sizes (S and L), and they are to be used accordingly depending on the context and design.

Sizes of Badge: S (16px) and L (20px)

Color variants

Badge comes in 4 different color variants, to be used as needed depending on the context, theme or any other variables.

Blue Badge
Red Badge
Green Badge
Yellow Badge

Last updated