UI Thing

Badge Group

A pill-style badge group that pairs a labeled addon with a short message, available in light and modern themes with leading or trailing alignment.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

Usage

New feature We've just released a new feature

Colors

The color prop controls the palette of the badge addon and icon. Applies to the light theme only — the modern theme uses system-aware tokens.

All colors

Gray Color Check out the gray color!
Red Color Check out the red color!
Orange Color Check out the orange color!
Amber Color Check out the amber color!
Yellow Color Check out the yellow color!
Lime Color Check out the lime color!
Green Color Check out the green color!
Emerald Color Check out the emerald color!
Teal Color Check out the teal color!
Cyan Color Check out the cyan color!
Sky Color Check out the sky color!
Blue Color Check out the blue color!
Indigo Color Check out the indigo color!
Violet Color Check out the violet color!
Purple Color Check out the purple color!
Fuchsia Color Check out the fuchsia color!
Pink Color Check out the pink color!
Rose Color Check out the rose color!

Semantic aliases

New featureWe've just released a new feature
New featureWe've just released a new feature
ErrorThere was a problem with that action
WarningJust to let you know this might be a problem
SuccessYou've updated your profile and details

Sizes

Two sizes are available: md and lg.

New feature We've just released a new feature
New feature We've just released a new feature

Alignment

Leading

The addon pill appears before the main text with the icon at the trailing end.

New featureWe've just released a new feature
New featureWe've just released a new feature
ErrorThere was a problem with that action
WarningJust to let you know this might be a problem
SuccessYou've updated your profile and details

Trailing

The main text comes first, followed by the addon pill with the icon inside.

We've just released a new featureNew feature
We've just released a new featureNew feature
There was a problem with that actionError
Just to let you know this might be a problemWarning
You've updated your profile and detailsSuccess

Theme

Modern — leading

The modern theme uses system-aware background and border tokens with a color dot indicator inside the addon.

New featureWe've just released a new feature
New featureWe've just released a new feature
ErrorThere was a problem with that action
WarningJust to let you know this might be a problem
SuccessYou've updated your profile and details

Modern — trailing

We've just released a new featureNew feature
We've just released a new featureNew feature
There was a problem with that actionError
Just to let you know this might be a problemWarning
You've updated your profile and detailsSuccess

No icon

Set :icon="false" to hide the trailing icon entirely.

New feature We've just released a new feature
New feature We've just released a new feature

Badge

A badge is a component that is used to highlight an item's status for quick recognition.

BG Pattern - Circle

A decorative concentric circle SVG pattern that fades outward - useful as a background embellishment for hero sections, cards, and empty states.