Badge
Show short roles, labels, and data states.
Preview
Default
In review
Ready
Failed
Example
<.badge color={:success} variant={:soft}>Ready</.badge>API contract
badge/1 uses declared Phoenix attributes and slots. This table is generated from the compiled component metadata.
| Attribute | Type | Required | Default | Accepted values |
|---|---|---|---|---|
color |
:atom |
No | nil |
[nil, :neutral, :primary, :secondary, :accent, :info, :success, :warning, :error] |
variant |
:atom |
No | nil |
[nil, :outline, :dash, :soft, :ghost] |
size |
:atom |
No | :md |
[:xs, :sm, :md, :lg, :xl] |
class |
:any |
No | nil |
Any value matching the declared type |
rest |
:global |
No | — |
Any value matching the declared type |
| Slot | Required | Slot attributes |
|---|---|---|
inner_block |
No | No slot attributes |
States and behavior
Semantic text accompanies visual treatment so status is not conveyed through color or motion alone.
Keyboard and accessibility
The component itself does not add a keyboard interaction. Any slotted action must remain a labelled native control.