Badge

Small UI item which indicates a status, notification, or event that appears in relativity with the object it refers to. Think notification or message count; it’s not interactive and used to highlight information.

 

Types

Indicators (aka dots)

Badge-Example-Indicator-Slideshow
Badge-Example-Indicator-Online
Badge-Example-Indicator-Message

 

Counts

Badge-Example-Count-Chat-Message
Badge-Example-Count-Message
Badge-Example-Count-Tab

 

New

  • Use for new features only
  • Use for 3-6 months
  • Always use the pink color, never purple. This allows users to associate “pink” with “new”
New Badge

 

Resources

(internal only)

Figma

Storybook

 

 

Badges

Chips

Pills

Interactive

No

Yes

No

Used for labelling

No

No

Yes

Use

Indicate status, notification, or event

Select from 2-3 options

Highlight information or status