Badge Block
The badge block renders a compact colored pill. Use it to show status, priority, category, or any short labeled value.
Fields
| Field | Type | Required | Values | Default |
|---|---|---|---|---|
type |
string | Yes | "badge" |
— |
label |
string | Yes | Short text | — |
variant |
string | Yes | See below | — |
Variants
| Value | Color | Use case |
|---|---|---|
"default" |
Neutral/grey | General labels, categories |
"success" |
Green | Completed, approved, healthy |
"warning" |
Yellow/Amber | Degraded, needs attention |
"error" |
Red | Failed, rejected, critical |
"pending" |
Blue/Grey | In progress, waiting, queued |
Examples
Status Badge
{
"type": "badge",
"label": "Live",
"variant": "success"
}
Priority Badge
{
"type": "badge",
"label": "High Priority",
"variant": "error"
}
Processing Badge
{
"type": "badge",
"label": "Processing",
"variant": "pending"
}
Category Label
{
"type": "badge",
"label": "Sales",
"variant": "default"
}
Multiple Badges
To show multiple badges side by side, include multiple badge blocks consecutively:
[
{ "type": "badge", "label": "Production", "variant": "error" },
{ "type": "badge", "label": "P0", "variant": "error" },
{ "type": "badge", "label": "Assigned", "variant": "pending" }
]
Patching
{
"id": "status-badge",
"patch": {
"label": "Resolved",
"variant": "success"
}
}