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 GREEN_AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";
const ORANGE_AVATAR_URL =
"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg";
const BLUE_AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg";
function Avatar({ src }: { src: string }) {
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={src} alt="" />
</span>
);
}
export default function BadgeDefaultDemo() {
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">
<Badge.Anchor>
<Avatar src={GREEN_AVATAR_URL} />
<Badge color="danger">5</Badge>
</Badge.Anchor>
<Badge.Anchor>
<Avatar src={ORANGE_AVATAR_URL} />
<Badge color="accent">New</Badge>
</Badge.Anchor>
<Badge.Anchor>
<Avatar src={BLUE_AVATAR_URL} />
<Badge color="success" placement="bottom-right" />
</Badge.Anchor>
</div>
</div>
);
}
export { BadgeDefaultDemo };