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.

Playground

Draft
HTML 
<span
  class="ds-badge"
  data-emphasis="subtle"
  data-intent="neutral"
  data-size="medium"
>
  <span class="ds-badge__label" data-part="label">Draft</span>
</span>