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
heex 
          <.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
heex 
          <.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" />
Log in to view
Soft
Primary Secondary Info Success Warning Danger Gray
heex 
          <.badge color="primary" label="Primary" variant="soft" />
<.badge color="secondary" label="Secondary" variant="soft" />
<.badge color="info" label="Info" variant="soft" />
<.badge color="success" label="Success" variant="soft" />
<.badge color="warning" label="Warning" variant="soft" />
<.badge color="danger" label="Danger" variant="soft" />
<.badge color="gray" label="Gray" variant="soft" />
Log in to view
Outline
Primary Secondary Info Success Warning Danger Gray
heex 
          <.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" />
Log in to view
With icon
2 hours ago New messages Online now
heex 
          <div class="flex flex-wrap items-end gap-2">
  <.badge color="gray" variant="light" with_icon label="SM" size="sm">
    <.icon name="hero-clock-solid" class="w-3 h-3 pb-[0.05rem]" /> 2 hours ago
  </.badge>
  <.badge color="secondary" variant="dark" label="md" size="md">
    <.icon name="hero-envelope-solid" class="w-4 h-4 mr-1 pb-[0.05rem]" /> New messages
  </.badge>
  <.badge color="success" variant="outline" label="lg" size="lg">
    <.icon name="hero-signal-solid" class="w-5 h-5 mr-1 pb-[0.025rem]" /> Online now
  </.badge>
</div>
Log in to view
Properties
elixir 
          attr(:size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"])
attr(:variant, :string, default: "light", values: ["light", "dark", "soft", "outline"])

attr(:color, :string,
  default: "primary",
  values: ["primary", "secondary", "info", "success", "warning", "danger", "gray"]
)

attr(:with_icon, :boolean, default: false, doc: "adds some icon base classes")
attr(:class, :string, default: "", doc: "CSS class for parent div")
attr(:label, :string, default: nil, doc: "label your badge")
attr(:rest, :global)
slot(:inner_block, required: false)