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
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 | - |