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";
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 BadgeColorsDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex items-center gap-6">
{(["default", "accent", "success", "warning", "danger"] as const).map((color) => (
<Badge.Anchor key={color}>
<Avatar />
<Badge color={color} />
</Badge.Anchor>
))}
</div>
</div>
);
}
export { BadgeColorsDemo };