Badge
NEWAn animated status badge where numbers and strings roll on value change, with live status pulse dot, removable chip actions, and rich tone variants.
Live statusBeta releaseStandard
3
Removable Chips (with exit animations):
Next.jsFramer MotionTailwindEasyUI
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/badge
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'soft' | 'solid' | 'outline' | 'soft' | Visual style of the badge |
| tone | 'neutral' | 'success' | 'warning' | 'danger' | 'neutral' | Color tone of the badge |
| dot | boolean | false | Displays a leading status indicator dot |
| pulse | boolean | false | Adds a soft animated pulse ring to the status dot |
| onRemove | () => void | undefined | Callback enabling dismissible chip mode with an × icon |
| children | React.ReactNode | undefined | Badge contents (strings & numbers auto-roll on change) |