On this page
Overview
Show code, ProjectStatus.tsx
Counts: a compact number, here inside buttons.
Show code, CountsInButtons.tsx
DiffStat: the size of a change.
Show code, ChangeSize.tsx
Variants
- Soft
Most states, in lists, tables and headings.
- Solid
The one state that must stand out, such as Overdue.
- Outline
Names and categories, such as a team or a folder.
Show code, Emphasis.tsx
Tones
A badge takes every status tone, which Colors & themes describes.
- Neutral
- Primary
- Accent
- Success
- Warning
- Danger
- Done
Show code, Tones.tsx
Counts
A count takes the same tones and variants.
- By default it is neutral and soft.
- A count that needs attention is solid, in the primary tone.
Anatomy
Pill
Icon
Label
Show code, BadgeAnatomy.tsx
Behaviour
Adapting to width
A badge stays on one line and ends with an ellipsis where its container is narrower.
Show code, LongState.tsx
Rules
A badge's word carries its meaning, and only the state that must stand out is solid.
Use it when
- A short state beside what it describes, such as In review or Blocked
- A name or a category on an item, such as a team or a folder
- Neutral metadata beside related content, such as a plan
- A number that belongs to a label, such as unread messages
- The size of a change beside a file, such as +12 −3DiffStat
Show code, SoftInLists.tsx
Show code, SolidEverywhere.tsx
Words and tones
Give the same state the same word and tone everywhere. Let the word carry the meaning, never the tone alone.
Give a routine state most rows share, such as healthy, the neutral tone in the column's one variant, so the states that need someone stand out.
Content
Show 99+ beyond two digits. Give the full count in the count's name, for assistive technology.