Badge

Success Error Warning Info Secondary Accent
<.dm_badge variant="success">
  Success
</.dm_badge>
<.dm_badge variant="error">
  Error
</.dm_badge>
<.dm_badge variant="warning">
  Warning
</.dm_badge>
<.dm_badge variant="info">
  Info
</.dm_badge>
<.dm_badge variant="secondary">
  Secondary
</.dm_badge>
<.dm_badge variant="accent">
  Accent
</.dm_badge>
Tiny Small Medium Large
<.dm_badge size="xs">
  Tiny
</.dm_badge>
<.dm_badge size="sm" variant="success">
  Small
</.dm_badge>
<.dm_badge size="md" variant="primary">
  Medium
</.dm_badge>
<.dm_badge size="lg" variant="error">
  Large
</.dm_badge>
Primary Success Warning
<.dm_badge variant="primary" outline>
  Primary
</.dm_badge>
<.dm_badge variant="success" outline>
  Success
</.dm_badge>
<.dm_badge variant="warning" outline>
  Warning
</.dm_badge>
Ghost
<.dm_badge variant="ghost">
  Ghost
</.dm_badge>
Soft Primary Soft Success Soft Error
<.dm_badge soft variant="primary">
  Soft Primary
</.dm_badge>
<.dm_badge soft variant="success">
  Soft Success
</.dm_badge>
<.dm_badge soft variant="error">
  Soft Error
</.dm_badge>
Pill Done
<.dm_badge variant="primary" pill>
  Pill
</.dm_badge>
<.dm_badge variant="success" pill>
  Done
</.dm_badge>
<.dm_badge dot variant="error">
</.dm_badge>
<.dm_badge dot variant="success">
</.dm_badge>
<.dm_badge dot variant="warning">
</.dm_badge>
✓ Online ✗ Offline 42 5
<.dm_badge size="sm" variant="success">
  ✓ Online
</.dm_badge>
<.dm_badge size="sm" variant="error">
  ✗ Offline
</.dm_badge>
<.dm_badge variant="accent">
  42
</.dm_badge>
<.dm_badge size="xs" variant="error">
  5
</.dm_badge>