Components Badges

Badges

Badges are UI elements that are most often used to represent status information, an input or attribute.
Light
Primary Secondary Info Success Warning Danger Gray 
          <.badge color="primary" label="Primary" />
<.badge color="secondary" label="Secondary" />
<.badge color="info" label="Info" />
<.badge color="success" label="Success" />
<.badge color="warning" label="Warning" />
<.badge color="danger" label="Danger" />
<.badge color="gray" label="Gray" />
Dark
Primary Secondary Info Success Warning Danger Gray 
          <.badge color="primary" label="Primary" variant="dark" />
<.badge color="secondary" label="Secondary" variant="dark" />
<.badge color="info" label="Info" variant="dark" />
<.badge color="success" label="Success" variant="dark" />
<.badge color="warning" label="Warning" variant="dark" />
<.badge color="danger" label="Danger" variant="dark" />
<.badge color="gray" label="Gray" variant="dark" />
Outline
Primary Secondary Info Success Warning Danger Gray 
          <.badge color="primary" label="Primary" variant="outline" />
<.badge color="secondary" label="Secondary" variant="outline" />
<.badge color="info" label="Info" variant="outline" />
<.badge color="success" label="Success" variant="outline" />
<.badge color="warning" label="Warning" variant="outline" />
<.badge color="danger" label="Danger" variant="outline" />
<.badge color="gray" label="Gray" variant="outline" />
With icon
2 hours ago New messages Online now 
          <div class="flex flex-wrap items-end gap-2">
  <.badge color="gray" variant="light" icon label="SM" size="sm">
    <HeroiconsV1.Solid.clock class="w-3 h-3 pb-[0.05rem]" />
    2 hours ago
  </.badge>
  <.badge color="secondary" variant="dark" label="md" size="md">
    <HeroiconsV1.Solid.mail class="w-4 h-4 mr-1 pb-[0.05rem]" />
    New messages
  </.badge>
  <.badge color="success" variant="outline" label="lg" size="lg">
    <HeroiconsV1.Solid.status_online class="w-5 h-5 mr-1 pb-[0.025rem]" />
    Online now
  </.badge>
</div>
Properties

Defaults are indicated in bold.

Name Type Options
label :string -
size :string sm , `md`, `lg`
variant :string light , `dark`, `outline`
color :string primary , `secondary`, `info`, `success`, `warning`, `danger`, `gray`
icon :boolean `true`, false
class :string -