For Designer

Components/Feedback

Badge

Badges are small labels for a status, a category or a count, next to the thing they describe

Variants
384
Colors
6
Styles
4

Playground

Build a badge, then change its text. Numbers work on Basic and Dot, icons on the Icon type

Badge

Badge · Size=Medium · Type=Basic · Color=Main · Style=Light · Number=false · Rounded=false

Colors and styles

Six colors in four styles. Light is the default; Filled stands out the most, so keep it for one badge per view

FilledBrandDefaultSuccessWarningInfoError
LightBrandDefaultSuccessWarningInfoError
StrokeBrandDefaultSuccessWarningInfoError
WhiteBrandDefaultSuccessWarningInfoError

Types

Basic for labels, Dot for live states, Icon for removable filters, Number for counts

BasicDraft
DotLive
IconBeta
Number12

Sizes and shape

Medium next to body text, Small inside dense rows and tabs. Rounded reads as a status pill

Medium20 pxActive
Small16 pxActive
Rounded falsePending
Rounded truePending

When to use

Use when

  1. An item has a status people scan for, like Draft, Live or Overdue
  2. A count matters, like unread messages on a tab
  3. A filter people picked can be removed with one click

Avoid when

  1. The label is a long sentence, use plain text
  2. People need to act on it, use a Button
  3. The message needs space and an explanation, use an Alert

Do and don’t

PaidOverdue
Do

Use one or two words and the color that matches the meaning, green for done, red for a problem

PaidOverdue
Don’t

Don’t color badges at random, people read color as status and will guess wrong

Tokens and specs

PropertyTokenValue
Height—20 px, 16 px at Small
Padding—2 / 8 px, 2 / 4 px for Icon and Dot
Radius6 px, 999 px when rounded
Text—Inter Medium 12/16, 10/12 at Small
Number—20 × 20 px, 18 × 16 px at Small
Dot—4 px in a 12 px frame, 2 px to the text
Icon—12 px, 10 px at Small
Main#1868D0
Neutral#262626
Green#1FC16B
Orange#FA7319
Blue#335CFF
Red#FB3748
Main, light#ECF0FE
Neutral, light#F7F7F7
Green, light#E3F7EC
Orange, light#FFF3EB
Blue, light#EEF0FF
Red, light#FFEBEC
Filled text#FFFFFF
White fill#FFFFFF
Stroke—1 px inside, the color’s base
Esc