Badge

neutral destructive warning attention success information focus primary secondary
<.badge label="neutral" color="neutral" style="fill"/>
<.badge label="destructive" color="destructive" style="fill"/>
<.badge label="warning" color="warning" style="fill"/>
<.badge label="attention" color="attention" style="fill"/>
<.badge label="success" color="success" style="fill"/>
<.badge label="information" color="information" style="fill"/>
<.badge label="focus" color="focus" style="fill"/>
<.badge label="primary" color="primary" style="fill"/>
<.badge label="secondary" color="secondary" style="fill"/>
neutral destructive warning attention success information focus primary secondary
<.badge label="neutral" color="neutral" style="light-fill"/>
<.badge label="destructive" color="destructive" style="light-fill"/>
<.badge label="warning" color="warning" style="light-fill"/>
<.badge label="attention" color="attention" style="light-fill"/>
<.badge label="success" color="success" style="light-fill"/>
<.badge label="information" color="information" style="light-fill"/>
<.badge label="focus" color="focus" style="light-fill"/>
<.badge label="primary" color="primary" style="light-fill"/>
<.badge label="secondary" color="secondary" style="light-fill"/>
Small Large
<.badge label="Small" size="small"/>
<.badge label="Large" size="large"/>
Disabled
<.badge disabled label="Disabled"/>
Dot
Dot
<.badge label="Dot" dot/>
<.badge label="Dot" size="large" dot/>
Icon
Icon
<.badge label="Icon">
  <:icon>
    <.alert_circle />
  </:icon>
</.badge>
<.badge label="Icon" size="large">
  <:icon>
    <.alert_circle />
  </:icon>
</.badge>
Very Long Badge Label That Might Wrap
Disabled with Icon
Success with Dot
<.badge label="Very Long Badge Label That Might Wrap"/>
<.badge disabled label="Disabled with Icon">
  <:icon>
    <.alert_circle />
  </:icon>
</.badge>
<.badge label="Success with Dot" dot color="success" style="light-fill"/>