Phoenix Duskmoon UI Storybook

Badge

Default Open in playground 
<.dm_badge >
  New
</.dm_badge>
Color variants Open in playground 
<.dm_badge color="success">
  Active
</.dm_badge>
Error badge Open in playground 
<.dm_badge color="error">
  Error
</.dm_badge>
Warning badge Open in playground 
<.dm_badge color="warning">
  Warning
</.dm_badge>
Info badge Open in playground 
<.dm_badge color="info">
  Info
</.dm_badge>
Secondary badge Open in playground 
<.dm_badge color="secondary">
  Secondary
</.dm_badge>
Accent badge Open in playground 
<.dm_badge color="accent">
  Accent
</.dm_badge>
Size variants Open in playground 
<.dm_badge size="xs">
  Tiny
</.dm_badge>
Small badge Open in playground 
<.dm_badge size="sm" color="success">
  Small
</.dm_badge>
Large badge Open in playground 
<.dm_badge size="lg" color="error">
  Large
</.dm_badge>
Outline style Open in playground 
<.dm_badge color="primary" outline>
  Outline
</.dm_badge>
Outline warning Open in playground 
<.dm_badge color="warning" outline>
  Warning
</.dm_badge>
Ghost style Open in playground 
<.dm_badge color="ghost">
  Ghost
</.dm_badge>
Outline success Open in playground 
<.dm_badge color="success" outline>
  Complete
</.dm_badge>
Status indicators Open in playground 
<.dm_badge size="sm" color="success">
  ✓ Online
</.dm_badge>
Status offline Open in playground 
<.dm_badge size="sm" color="error">
  ✗ Offline
</.dm_badge>
Count badge Open in playground 
<.dm_badge color="accent">
  42
</.dm_badge>
Notification badge Open in playground 
<.dm_badge size="xs" color="error">
  5
</.dm_badge>