Components
Badges
Badges
Badges are UI elements that are most often used to represent status information, an input or attribute.
Light
<.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
<.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
<.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
<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
attr(:size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"])
attr(:variant, :string, default: "light", values: ["light", "dark", "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)