PrimitivesDisplayBadge

Badge

A short worded state or label. Tone, emphasis, size and shape are the shared traits; a leading mark or glyph carries meaning the word cannot. For a number and nothing else, reach for the count below.

<koala-badge>

Tone

What the state means

Primary Success Danger Warning Info Neutral

Emphasis

Soft — the default

Completed Rejected Draft

Outline

Completed Rejected Draft

Size

Xs, Sm, Md, Lg

Extra small Small Medium Large

Shape

Rounded is the default; Pill for a tag rather than a state

Rounded Pill Sheffield (hybrid)

Lead

A mark the word cannot carry

Completed Failed Blocked Up next

lead-tone colours the mark alone, on a neutral chip

Live Pending Stopped

Icon

A named glyph where no mark fits

Admin Org admin Conveyancer Sheffield (hybrid) Up to £75,000

Shimmer

A celebratory sweep, for a state worth noticing

Complete

Stamp

A large outlined badge is the stamp the error pages wear

Forbidden Not found

Inside a link

The caller owns the destination; the badge keeps the visual label and arrow

Q-OQKBLK Q-7HH2A T-4K2M Next step

Count with progress

The ring is the only thing that varies

9 9 9 9 128

API

tone PrimarySuccessDangerWarningInfoNeutral

emphasis SolidSoftOutlineGhostPlain

size XsSmMdLg

shape RoundedPillCircle

lead NoneDotDotHollowTickCross

lead-tone Tone — colours the mark or glyph alone

icon IconName

shimmer truefalse

tooltip string

on-surface PageContainerInverseBrandBand

trail IconName — the glyph after the label