Badge
Status label for categories, counts, and metadata, with an optional dot indicator and dismiss action.
GrayBrandSuccessWarningError
Installation
npx paubha@latest add badgeUsage
import { Badge } from "@/components/ui/badge";
<Badge variant="success">Active</Badge>
<Badge dismissible dismissLabel="Remove Frontend tag" onDismiss={() => remove(tag)}>
Frontend
</Badge>Examples
Fill styles
SubtleOutlineSolid
Sizes
SmallMediumLarge
With icons
FeaturedCompleted
Icon only
With a status dot
Active
Dismissible
Design
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "gray" | "brand" | "success" | "warning" | "error" | "gray" | Color treatment. |
| fill | "subtle" | "outline" | "solid" | "subtle" | Fill style: tinted background, bordered/transparent, or solid on-color. |
| size | "sm" | "md" | "lg" | "sm" | Height (20/28/32px), padding, font, and icon size. |
| iconOnly | boolean | false | Icon-only type: pass the icon as children plus an aria-label; renders role="img". |
| leadingIcon | React.ReactNode | — | Leading icon slot, sized 16px (sm) or 20px (md, lg). |
| leadingAvatar | React.ReactNode | — | Leading avatar slot, sized 12px (sm) or 14px (md, lg). |
| trailingIcon | React.ReactNode | — | Trailing icon slot, sized 16px (sm) or 20px (md, lg). |
| showDot | boolean | false | Shows a small decorative status dot before the label. |
| dismissible | boolean | false | Shows a dismiss button after the label. |
| dismissLabel | string | "Remove" | Accessible name for the dismiss button; be specific, e.g. "Remove Design category". |
| onDismiss | () => void | — | Called when the dismiss button is activated. |
Related components
- Alert: for prominent status messages
- Toast: for notifications
- Tag Input: for user-created tags
Accessibility
Accessibility
Root element. A plain
<span>: static badges are ordinary text. Passrole="status"only when the badge announces a meaningful live update.Icon-only. Renders
role="img"; always give it anaria-label.Dismiss button. Native
<button>: Tab to focus, Enter/Space activates,glow-focusring. Name each action specifically viadismissLabel(e.g. "Remove Design category").Dot, icon, and avatar slots. Decorative,
aria-hidden. State the status in visible text; never rely on color alone.