Components

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, and the dot of the modern theme. There are 30 colors, shared with the Badge and the Tag Group through ~/utils/badge-colors: primary, the whole Tailwind palette (including the newer taupe, mauve, mist and olive) and the error, warning and success aliases. The modern theme uses system-aware tokens for everything else.

All colors

Primary Color Check out the primary 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!
Slate Color Check out the slate color!
Gray Color Check out the gray color!
Zinc Color Check out the zinc color!
Neutral Color Check out the neutral color!
Stone Color Check out the stone color!
Taupe Color Check out the taupe color!
Mauve Color Check out the mauve color!
Mist Color Check out the mist color!
Olive Color Check out the olive color!

Semantic aliases

New featureWe've just released a new feature
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
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
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
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.