Components

Badge

36 Figma variants across color, size, and style. Used for status labels, counts, and categorical metadata. Always non-interactive.

Colors × Styles

default
default filleddefault subtledefault outlined
success
success filledsuccess subtlesuccess outlined
warning
warning filledwarning subtlewarning outlined
error
error fillederror subtleerror outlined
information
information filledinformation subtleinformation outlined

Sizes

Small badgeMedium badge

Tokens used

Each badge variant maps to the status color tokens — background, foreground, and border are all token-driven.

status/error, warning, success, informationForeground color / filled background
status/*-bgSubtle variant background
bg/mutedDefault color background (subtle)
radius/fullPill shape
size/xs, body/smFont size by badge size