Badge

Compact status label component with semantic tone colors.

Usage Notes

• Use for status indicators (success / warning / error), classification labels, and count markers.
• Not suitable for long text labels (use callout) or interactive triggers (use button).
• Related components: callout for titled message blocks, stat for numeric metrics.
• Multiple badges are typically placed inside a row.
• Use tone only for semantic state, not as an arbitrary style picker.

Tone variants

namespace: "doc_badge_tone_diff",
  layout: {
    "row:tones": {
      "badge:info": {
        label: "info",
        tone: "info"
      },
      "badge:success": {
        label: "success",
        tone: "success"
      },
      "badge:warning": {
        label: "warning",
        tone: "warning"
      },
      "badge:danger": {
        label: "danger",
        tone: "danger"
      },
      "badge:muted": {
        label: "muted",
        tone: "muted"
      }
    }
  }
}

API Reference