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 PLACEMENTS = ["top-right", "top-left", "bottom-right", "bottom-left"] 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 BadgePlacementsDemo() {
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-8">
{PLACEMENTS.map((placement) => (
<div className="flex flex-col items-center gap-2" key={placement}>
<Badge.Anchor>
<Avatar />
<Badge color="accent" placement={placement} />
</Badge.Anchor>
<span className="text-xs text-muted-foreground">{placement}</span>
</div>
))}
</div>
</div>
);
}
export { BadgePlacementsDemo };