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