Skip to content

role presentation

Badge draft v0.1.0

A short piece of text that qualifies the item next to it: a status, a count, a category.

A badge is a small, read-only label attached to something else: the status of an order (Shipped), the number of unread messages, a category tag. It is text with a tinted or filled background; its intent gives the tint a meaning (success, warning, error, info), its emphasis how loud it is. A badge is never interactive: a removable tag or a filter is a different component.

Examples

Draft
  • emphasis="subtle"
  • intent="neutral"
  • label="Draft"
Open in playground