Dark Mode
Colors
Drag And Drop
Forms
{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Badge","description":"A small, attention-grabbing UI element used to display notifications, status indicators, or counts in a compact format. It draws attention to key details.","url":"https://intentui.com/docs/components/statuses/badge","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/statuses/badge"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Statuses","item":"https://intentui.com/docs/components/statuses"},{"@type":"ListItem","position":5,"name":"Badge","item":"https://intentui.com/docs/components/statuses/badge"}]}]}
Badge
Loading...
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/badge
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm
pnpm
yarn
bun
npm install tailwind-variants
Examples
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.
Loading...
Shape
By default, badges are square, but you can switch to a circular shape if desired.
Loading...
Component API
The Badge component displays compact status or category text.
| Prop | Type | Default |
|---|---|---|
className | string | - |
intent | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "outline" | - |
isCircle | boolean | - |
