Badge group components

Q: What colors are available for badge groups?

Badge groups support "brand", "gray", "error", "warning" and "success". The color prop is required by the TypeScript props type, and falls back to "brand" at runtime if it's missing.

Q: What is the difference between the light and modern themes?

The theme prop accepts "light" (the default) or "modern". "light" renders a tinted pill in the chosen color. "modern" renders a neutral badge (bg-primary) with a border and adds a small dot in the chosen color, so color only affects the dot.

Q: How do I put the addon badge after the message?

Set align="trailing". The default "leading" places the addonText badge before the message and the arrow icon at the end; "trailing" places the message first and moves the icon inside the addon badge.

Q: What sizes are available for badge groups?

Badge groups support two sizes: "md" and "lg". Set them with the size prop. The default is "md".

Q: How do I change or remove the arrow icon?

The iconTrailing prop defaults to the ArrowRight icon from @untitledui/icons. Pass a different icon component or a React element to replace it, or pass null to hide it.

Q: How do I make a badge group clickable?

BadgeGroup renders a div with hover styles and a pointer cursor, but it has no href or onClick prop. Wrap it in an a tag or your router's link component to make it navigate.

FREE

Free and open-source React badge group components built for modern applications and websites. These badge groups are built using React Aria and styled with Tailwind CSS.

GitHub

Badge group example

Preview

Code

New featureWe've just released a new feature

Installation

You can add this badge group component using our CLI or manually:

CLI

Manual

npx untitledui@latest add badge-groups

Badge group examples

Below are examples and variations of this badge group component:

Pill color leading gray

Preview

Code

New featureWe've just released a new feature

Pill color leading brand

Preview

Code

New featureWe've just released a new feature

Pill color leading error

Preview

Code

ErrorThere was a problem with that action

Pill color leading warning

Preview

Code

WarningJust to let you know this might be a problem

Pill color leading success

Preview

Code

SuccessYou've updated your profile and details

Pill color trailing gray

Preview

Code

We've just released a new featureNew feature

Pill color trailing brand

Preview

Code

We've just released a new featureNew feature

Pill color trailing error

Preview

Code

There was a problem with that actionError

Pill color trailing warning

Preview

Code

Just to let you know this might be a problemWarning

Pill color trailing success

Preview

Code

You've updated your profile and detailsSuccess

Modern leading gray

Preview

Code

New featureWe've just released a new feature

Modern leading brand

Preview

Code

New featureWe've just released a new feature

Modern leading error

Preview

Code

ErrorThere was a problem with that action

Modern leading warning

Preview

Code

WarningJust to let you know this might be a problem

Modern leading success

Preview

Code

SuccessYou've updated your profile and details

Modern trailing gray

Preview

Code

We've just released a new featureNew feature

Modern trailing brand

Preview

Code

We've just released a new featureNew feature

Modern trailing error

Preview

Code

There was a problem with that actionError

Modern trailing warning

Preview

Code

Just to let you know this might be a problemWarning

Modern trailing success

Preview

Code

You've updated your profile and detailsSuccess

API reference

BadgeGroup

Import BadgeGroup from @/components/base/badges/badge-groups. Renders a <div> element.

BadgeGroup props
Prop	Type	Default	Description
`addonText`* (required)	`string`	—	The text of the pill-shaped addon, which is placed at the start or the end of the group depending on `align`.
`children`	`ReactNode`	—	The main text of the group, shown next to the addon. When omitted the group tightens its padding and the addon drops its margin.
`size`	`"md""lg"`	`"md"`	Controls the padding and font size of the group, its addon, and the trailing icon.
`color`	`"brand""warning""error""gray""success"`	`"brand"`	The color palette of the group. In the `light` theme it drives the background, text, ring, and icon colors; in the `modern` theme it only colors the status dot.
`theme`	`"light""modern"`	`"light"`	`light` fills the group with a tinted background and gives the addon its own ring, while `modern` renders a white, shadowed group with a colored status dot.
`align`	`"leading""trailing"`	`"leading"`	Alignment of the badge addon element.
`iconTrailing`	`ReactNode \| FC<{ className?: string; }>`	`ArrowRight`	An icon component or element rendered at the end of the group. With `align="trailing"` it sits inside the addon, otherwise it follows the group's text.
`className`	`string`	—	Additional CSS classes merged onto the group's root element.

FAQs

Please refer to our frequently asked questions page for more.

Badge groups support "brand", "gray", "error", "warning" and "success". The color prop is required by the TypeScript props type, and falls back to "brand" at runtime if it's missing.

The theme prop accepts "light" (the default) or "modern". "light" renders a tinted pill in the chosen color. "modern" renders a neutral badge (bg-primary) with a border and adds a small dot in the chosen color, so color only affects the dot.

Set align="trailing". The default "leading" places the addonText badge before the message and the arrow icon at the end; "trailing" places the message first and moves the icon inside the addon badge.

Badge groups support two sizes: "md" and "lg". Set them with the size prop. The default is "md".

The iconTrailing prop defaults to the ArrowRight icon from @untitledui/icons. Pass a different icon component or a React element to replace it, or pass null to hide it.

BadgeGroup renders a div with hover styles and a pointer cursor, but it has no href or onClick prop. Wrap it in an a tag or your router's link component to make it navigate.

Avatars Badges