Badge

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/badge

UsageCopy Anchor Link

import { Badge } from "@/components/ui/badge";

<Badge variant="success">Active</Badge>;

SizesCopy Anchor Link

With an iconCopy Anchor Link

Icons are sized for you. Hide decorative icons from screen readers with aria-hidden. Add rounded-full for a count.

LinksCopy Anchor Link

Use render to make a link look like a badge. It keeps link semantics and gets hover styles.

API referenceCopy Anchor Link

Renders a <span> and accepts every native <span> attribute.

You can also style any element as a badge with badgeVariants({ variant, size }).