Badge

Small count or info chip, like a merit badge, highlighting status or providing quick alerts at a glance.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Basic

A badge is a small label that displays additional information, such as a count or status. It's commonly used to highlight something important, like unread messages, notifications, or status updates. Think of it as a quick visual cue to grab your attention.

Label

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Intent

Badges come in a variety of colors: primary, secondary, success, info, warning, danger, light, dark, and light/dark. You can even use custom colors if you want.

primarysecondarysuccessinfowarningdanger

Shape

By default, badges are square, but you can switch to a circular shape if desired.

Label