Components
Badges
Badges
A small label for counts, statuses and categories.
Variants
A small label for counts, statuses and categories. light stays light in both colour schemes, soft adapts to dark mode, dark is maximum emphasis, outline stays quiet on any surface.
Light
Soft
Dark
Outline
<div class="flex flex-wrap items-center justify-center gap-3">
<.badge label="Light" />
<.badge variant="soft" label="Soft" />
<.badge variant="dark" label="Dark" />
<.badge variant="outline" label="Outline" />
</div>
Semantic colours
The full colour range in the soft variant - primary and secondary follow your theme dials, the semantic four carry meaning, gray labels without shouting.
primary
secondary
info
success
warning
danger
gray
<div class="flex flex-wrap items-center justify-center gap-3">
<.badge
:for={c <- ~w(primary secondary info success warning danger gray)}
color={c}
variant="soft"
label={c}
/>
</div>
Sizes
Five sizes on the shared scale; with_icon tightens the padding for a leading glyph.
xs
sm
md
lg
xl
<div class="flex flex-wrap items-center justify-center gap-3">
<.badge :for={z <- ~w(xs sm md lg xl)} size={z} label={z} />
</div>
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
CSS class for parent div |
color
|
string |
"primary"
|
one of: "primary", "secondary", "info", "success", "warning", "danger", "gray"
|
label
|
string |
nil
|
label your badge |
rest
|
global |
||
role
|
string |
"note"
|
one of: "note", "status"
|
size
|
string |
"md"
|
one of: "xs", "sm", "md", "lg", "xl"
|
variant
|
string |
"light"
|
one of: "light", "dark", "soft", "outline"
|
with_icon
|
boolean |
false
|
adds some icon base classes |
:inner_block
slot
|
slot |