Components
Loading preview...
Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-badgeimport { Badge } from "@/components/ui/heroui-badge";
const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";
const COLORS = ["accent", "default", "success", "warning", "danger"] as const;
const VARIANTS = ["primary", "secondary", "soft"] as const;
function Avatar() {
return (
<span className="inline-flex size-10 shrink-0 overflow-hidden rounded-3xl bg-zinc-100 dark:bg-zinc-800">
<img className="size-full object-cover" src={AVATAR_URL} alt="" />
</span>
);
}
export default function BadgeVariantsDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-col gap-8">
{VARIANTS.map((variant) => (
<div className="flex flex-col gap-4" key={variant}>
<h3 className="text-sm font-semibold capitalize text-muted-foreground">{variant}</h3>
<div className="flex items-center gap-6">
{COLORS.map((color) => (
<Badge.Anchor key={`${variant}-${color}`}>
<Avatar />
<Badge color={color} variant={variant}>
5
</Badge>
</Badge.Anchor>
))}
</div>
</div>
))}
</div>
</div>
);
}
export { BadgeVariantsDemo };