Noora (0.11.0)

Badge

Solid fill style badges with various colors Open in playground
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"/>
Light fill style badges with subtle background colors Open in playground
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"/>
Badge sizes: small (default) and large Open in playground
Small Large 
<.badge label="Small" size="small"/>
<.badge label="Large" size="large"/>
Disabled state badge (overrides color) Open in playground
Disabled 
<.badge disabled label="Disabled"/>
Badges with dot indicators Open in playground
Dot
Dot 
<.badge label="Dot" dot/>
<.badge label="Dot" size="large" dot/>
Badges with custom icons Open in playground
Icon
Icon 
<.badge label="Icon">
  <:icon>
    <.alert_circle />
  </:icon>
</.badge>
<.badge label="Icon" size="large">
  <:icon>
    <.alert_circle />
  </:icon>
</.badge>
Edge cases and special scenarios Open in playground
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"/>