Badge
Status pill with semantic variants, three sizes, and a dot option.
NeutralAccentSuccessWarningDestructiveOutline
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/badge.jsonUsage
import { Badge } from "@/components/ui/badge";
<Badge variant="success" dot>Active</Badge>With dot
ActivePendingOffline
Sizes
SmallMediumLarge
Props
| Prop | Type | Default |
|---|---|---|
variant | neutral · accent · success · warning · destructive · outline | neutral |
size | sm · md · lg | md |
dot | boolean | false |
Accessibility
- Renders a
span; purely presentational. When a badge is the only carrier of a status, make sure the status is also available as text (it is, the label is text). - Status colors pair the wash with a darker text token to keep contrast in both themes.