Phoenix + DaisyUI

Badge

Badge Open in playground
badge 
<.badge >
  badge
</.badge>
Badge with colors Open in playground
default
neutral
primary
secondary
accent
info
success
warning
error 
<.badge >
  default
</.badge>
<.badge color="neutral">
  neutral
</.badge>
<.badge color="primary">
  primary
</.badge>
<.badge color="secondary">
  secondary
</.badge>
<.badge color="accent">
  accent
</.badge>
<.badge color="info">
  info
</.badge>
<.badge color="success">
  success
</.badge>
<.badge color="warning">
  warning
</.badge>
<.badge color="error">
  error
</.badge>
Badge outline Open in playground
badge 
<.badge outline>
  badge
</.badge>
Sizes Open in playground
987,654
987,654
987,654
987,654 
<.badge size="xs">
  987,654
</.badge>
<.badge size="sm">
  987,654
</.badge>
<.badge size="md">
  987,654
</.badge>
<.badge size="lg">
  987,654
</.badge>
Empty badge Open in playground 
<.badge color="primary" size="xs"/>
<.badge color="primary" size="sm"/>
<.badge color="primary" size="md"/>
<.badge color="primary" size="lg"/>
Badge with state colors Open in playground
info
success
warning
error 
<.badge color="info">
  <.icon name="hero-x-mark" />
  info
</.badge>
<.badge color="success">
  <.icon name="hero-x-mark" />
  success
</.badge>
<.badge color="warning">
  <.icon name="hero-x-mark" />
  warning
</.badge>
<.badge color="error">
  <.icon name="hero-x-mark" />
  error
</.badge>
Badge in a text Open in playground

Heading
NEW 

<h2 class="text-xl">
  Heading
  <.badge size="xl">
    NEW
  </.badge>
</h2>
Badge in a button Open in playground 
<.button>
  Inbox
  <.badge color="secondary">
    +99
  </.badge>
</.button>