Badge test

Visual fixtures for badge variants and prop combinations. Press D to toggle dark mode, and hover linked badges to verify their rings.

Filled variants

Every color variant rendered plain, with an icon, and inside a link.

Primary

PrimaryPrimaryPrimary

Secondary

SecondarySecondarySecondary

Error

ErrorErrorError

Warning

WarningWarningWarning

Success

SuccessSuccessSuccess

Destructive

DestructiveDestructiveDestructive

Info

InfoInfoInfo

Beta

BetaBetaBeta

Outline

OutlineOutlineOutline

Red

RedRedRed

Green

GreenGreenGreen

Neutral

NeutralNeutralNeutral

Orange

OrangeOrangeOrange

Purple

PurplePurplePurple

Teal

TealTealTeal

Teal subtle

Teal subtleTeal subtleTeal subtle

Blue

BlueBlueBlue

Dot variants

Supported dot colors rendered plain and inside a link. Dot badges do not accept icons.

SuccessSuccess
WarningWarning
ErrorError
NeutralNeutral

Content combinations

Default props, nested content, a custom class, and combined icon and link treatments.

DefaultNested contentCustom paddingLinked with icon