Badge

Badges tonen status, categorieën of counts. Compact en niet-interactief.

Varianten

Default

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-surface-secondary text-label-secondary">
  Default
</span>

Success

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-surface-success text-label-on-color">
  Active
</span>

Critical

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-surface-critical text-label-on-color">
  Error
</span>

Warning

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-surface-warning text-label-on-color">
  Warning
</span>

Brand

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-brand text-label-on-color">
  Featured
</span>

Token Mapping

Property	Token
Border radius	`--radius-xs`
Padding	`--space-2` x `--space-1`
Font size	`--text-caption-size`
Font weight	500

Accessibility

Badges zijn informatief, niet interactief — gebruik nooit als buttons
Kleur is nooit de enige indicator; combineer altijd met tekst

Badge

On this page