Badge

20px minimum height ยท 12px text ยท 16px filled Reicon ยท 3px icon gap

Dark

On background

neutral
soft
WorkloadWorkload
WorkloadWorkload
solid
WorkloadWorkload
WorkloadWorkload
blue
soft
ActiveActive
ActiveActive
solid
ActiveActive
ActiveActive
green
soft
ReadyReady
ReadyReady
solid
ReadyReady
ReadyReady
red
soft
FailedFailed
FailedFailed
solid
FailedFailed
FailedFailed
amber
soft
PendingPending
PendingPending
solid
PendingPending
PendingPending
purple
soft
CustomCustom
CustomCustom
solid
CustomCustom
CustomCustom
sky
soft
QueuedQueued
QueuedQueued
solid
QueuedQueued
QueuedQueued

Conditional validation

Invalid

View collection

Invalid ยท live keyboard focus

View collection

Use Tab to inspect focus.

Trailing icon

blue solid neutral soft
View categoryHoverKeyboard focus

On card

neutral
soft
WorkloadWorkload
WorkloadWorkload
solid
WorkloadWorkload
WorkloadWorkload
blue
soft
ActiveActive
ActiveActive
solid
ActiveActive
ActiveActive
green
soft
ReadyReady
ReadyReady
solid
ReadyReady
ReadyReady
red
soft
FailedFailed
FailedFailed
solid
FailedFailed
FailedFailed
amber
soft
PendingPending
PendingPending
solid
PendingPending
PendingPending
purple
soft
CustomCustom
CustomCustom
solid
CustomCustom
CustomCustom
sky
soft
QueuedQueued
QueuedQueued
solid
QueuedQueued
QueuedQueued

Conditional validation

Invalid

View collection

Invalid ยท live keyboard focus

View collection

Use Tab to inspect focus.

Trailing icon

blue solid neutral soft
View categoryHoverKeyboard focus

Static badges are labels, not controls. Interactive badges use native links or buttons. Default: neutral, soft, pill. All seven colors support both emphases and shapes. Palette fills stay unchanged on hover. Focus: 2px surface gap, 2px edge, 2px soft halo. Validation styling is conditional on aria-invalid, not a normal status-badge state.

Back to StoryLite