Badge

Small pill-shaped labels used to highlight status, categories, or metadata. For announcement strips, use the BadgeGroup compound component.

Colors

13 semantic colours in two sizes — sm (text-xs) and md (text-sm).

Small (sm)

GrayPurpleRedAmberEmeraldSlateSkyBlueIndigoVioletPinkRoseOrange

Medium (md)

GrayPurpleRedAmberEmeraldSlateSkyBlueIndigoVioletPinkRoseOrange

With dot

Add a leading status dot via the dot prop. The dot colour matches the badge colour automatically.

Small

GrayPurpleRedAmberEmerald

Medium

GrayPurpleRedAmberEmerald

With icons

Use startContent for a leading icon and endContentfor a trailing icon (e.g. a dismiss ×).

Leading icon

GrayPurpleBlueEmeraldAmberRed

Trailing icon (dismiss)

GrayPurpleBlueEmeraldAmberRed

Both icons — md

GrayPurpleBlueEmeraldAmberRed

Icon only

Set isIconOnly for a compact square-ish badge showing only an icon. Pass the icon via startContent.

Small

Medium

Badge Group

A compound announcement strip: a coloured pill containing an inner chip label and a message. Use badgePosition to place the chip left or right. Add endContent on the message or badgeEndContent inside the chip.

Colors — sm

NewWe just launched something excitingUpdateNew features are now availableAlertCritical issue detected in productionNoticeMaintenance window scheduled tonightDoneAll systems are operational

Colors — md

NewWe just launched something excitingAlertCritical issue detected in productionDoneAll systems are operational

With trailing icon

NewRead the announcementLiveView the changelog

Badge position right

We just launched something excitingNewTry it out todayBeta