Badge

Small status indicators used to label items or highlight their properties.

Usage

Badges are used to highlight an item's status for quick recognition. They are not interactive and should not be used as buttons.

Content

Status Variants

Different color variants for various semantic meanings.

Default
Secondary
Outline
Critical

Spec

  • Typography: Plus Jakarta Sans, Extra-small (xs), Semibold.
  • Radius: Small (0.25rem).
  • Padding: 4px horizontal, 2px vertical.

Anatomy

Status label
Badge container
Text content