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({ size }: { size: "sm" | "md" | "lg" }) {
return (
<span
className={
size === "sm"
? "inline-flex size-8 shrink-0 overflow-hidden rounded-2xl bg-zinc-100 dark:bg-zinc-800"
: size === "lg"
? "inline-flex size-12 shrink-0 overflow-hidden rounded-3xl bg-zinc-100 dark:bg-zinc-800"
: "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 BadgeSizesDemo() {
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">
{(["sm", "md", "lg"] as const).map((size) => (
<Badge.Anchor key={size}>
<Avatar size={size} />
<Badge color="danger" size={size}>
5
</Badge>
</Badge.Anchor>
))}
</div>
</div>
);
}
export { BadgeSizesDemo };