Badge
Short status or category label. Not a person and not a button.
Master
Toggle size, intent, emphasis, icon only, removable and disabled to preview every Badge combination.
In progress
Usage
Use Badge for status on rows and cards, and for category or filter labels. Pick the intent from meaning and the emphasis from how loud it should be: subtle is the default, strong for the one thing that must stand out, faint for quiet lists. Only dismissible filters are removable. sm (20px) is the default; md and lg are larger kit sizes for roomier layouts. See contracts/badge.json for the full contract.
Do's
- Status on table rows or cards.
- Category markers and filter labels.
- A count or marker next to a title, like New.
Don'ts
- Do not invent a local Badge, Tag, Chip or Pill.
- Do not use as a button or link. Only the close button is interactive.
- Do not use for people. Use Avatar.
- Do not put sentences in a Badge.
- Do not use more than one strong Badge in a row or card.
- Do not use raw hex.
- Do not mix badge sizes in one row.
<Badge intent="info" emphasis="subtle" size="sm" > In progress </Badge>