Status Badge

1import { Badge } from "@/registry/ui/badge";
2 
3const StatusBadgeDemo = () => {
4  return (
5    <div className="flex flex-wrap items-center gap-3">
6      <Badge className="gap-1.5 border-amber-600/40 bg-amber-600/10 text-amber-500 shadow-none hover:bg-amber-600/10 dark:bg-amber-600/20">
7        <div className="size-1.5 rounded-full bg-amber-500" /> In Progress
8      </Badge>
9      <Badge className="gap-1.5 border-destructive/30" variant="destructive">
10        <div className="size-1.5 rounded-full bg-red-400" /> Blocked
11      </Badge>
12      <Badge className="gap-1.5 border-emerald-600/40 bg-emerald-600/10 text-emerald-500 shadow-none hover:bg-emerald-600/10 dark:bg-emerald-600/20">
13        <div className="size-1.5 rounded-full bg-emerald-500" /> Done
14      </Badge>
15    </div>
16  );
17};
18 
19export default StatusBadgeDemo;