Badge

Badge, Label, whatever you want to call it. A simple status indicator with colored background and text.

Active In progress Draft Canceled

HEEx

<div class="flex flex-wrap gap-2.25 max-w-65">
  <Badge.badge variant={:success}>Active</Badge.badge>
  <Badge.badge variant={:warning}>In progress</Badge.badge>
  <Badge.badge>Draft</Badge.badge>
  <Badge.badge variant={:danger}>Canceled</Badge.badge>
</div>

Add this module

terminal

mix dizzy.add badge

Component API

Badge.badge

Attributes and slots for Badge.badge
Name	Type	Default	Values / slot attributes
`rest`	`:global`	nil	—
`variant`	`:atom`	:neutral	:neutral, :success, :warning, :danger
`inner_block`	`slot`	Required

Keyboard & accessibility

Noninteractive. Status is conveyed through text as well as color.