Badge

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/badge

UsageCopy Anchor Link

<Badge tone="success">
  <CheckCircleIcon weight="fill" />
  Paid
</Badge>

Numbers inside a badge use tabular figures, so a count that updates does not change its width digit by digit.

TonesCopy Anchor Link

neutral (default), success, warning, danger and info. Each one is a single hue from the foundation: the background is that hue at 11%, the border at 24% and the text mixes it with the regular text colour, so a badge reads as its status without shouting. Light and dark each get their own values.

OutlineCopy Anchor Link

variant="outline" drops the tint and keeps the tone only in the dot or the icon. Use it in dense lists and tables, where a whole column of tinted badges gets loud.

<Badge variant="outline" tone="success" dot>
  Active
</Badge>

Icons and dotsCopy Anchor Link

Put a Phosphor icon before the label and it takes the tone's colour at full strength, while the label stays softer. dot adds a small round mark instead, for when an icon would be too much. The padding tightens on the leading side for both, so the badge stays optically centred.

SizesCopy Anchor Link

md (default) for lists and tables, sm next to a heading or inside a menu item. Both are sized from the text token, so they follow density along with the controls around them.

AccessibilityCopy Anchor Link

Colour is never the only signal: the label says the status, and a dot is hidden from screen readers.

Badges are labels, not controls: they take no focus and do nothing on click. When a status should filter a list or open something, put a real Button or link around it, so it gets a focus ring and a hit area.

Badge or something else?Copy Anchor Link

• A count next to a tab label: TabsCount.
• A message about the page, with room for a sentence: an alert, not a badge.
• A confirmation after an action: Toast.

API referenceCopy Anchor Link