Components Badges

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

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)