PendingIn progress
SubmittedIn reviewSuccess
FailedExpired
Badge
Status badges with matching icons, tinted backgrounds, square corners, and a subtle reveal and hover lift that respect reduced-motion preferences.
Installation
bunx shadcn@latest add https://ui.razeev.com/r/badge.jsonUsage
tsx
import { Badge } from "@/components/hangry-ui/components/badge";
<Badge variant="success">Published</Badge>Variants
Use pending, in-progress, submitted, in-review, success, failed, or expired for status icons and default labels. The existing color variants remain available: neutral, info, warning, error, blue, purple, pink, teal, orange.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "pending" | "in-progress" | "submitted" | "in-review" | "failed" | "expired" | "neutral" | "info" | "success" | "warning" | "error" | "blue" | "purple" | "pink" | "teal" | "orange" | "success" | Badge status or color. |
children | ReactNode | Status label | Overrides the default status label. |
className | string | "" | Additional CSS classes on the component root. |
Native props | ComponentProps<"span"> | — | Forwards native span attributes, aria-* attributes, and event handlers. |
Setup notes
Use Tailwind CSS v4 and lucide-react for the status icons. Badges have square corners and no border. Customize the label with children and styling with className.