Examples

Free, accessible React badge components built with Base UI for status indicators, labels, and notification counts with multiple variants.

Base

---

Pill

Rounded pill badges for a subtler appearance.

---

Dot

Indicator dots for status signals.

---

Dot Pill

Pill-shaped dots for a subtler status indicator.

---

Icon

Badges with icons.

---

Icon Pill

Pill badges with icons for a subtler look.

---

Icon Right

Icons positioned after the label.

---

Icon Right Pill

Pill badges with icons on the right side.

---

Icon Dot

Status icons with labels.

---

Icon Dot Pill

Pill badges with status icons on the right.

---

Icon Right Dot

Icon plus label on the right for call-to-action badges.

---

Icon Right Dot Pill

Pill badges with icons on the right.

---

Close

Badges that can be dismissed with a close button.

---

Close Pill

Pill badges with dismiss functionality.

---

Count

Notification counts attached to labels.

---

Count Pill

Pill badges with notification counts.

Size Examples

Different sizes for all existing badge variants.

Small

A small badge size.

Medium

A medium badge size.

Large

A large badge size.