Badge
A small rounded label in three variants.
import { Badge } from "@cynco-labs/ui";Example
import { Badge } from "@cynco-labs/ui";
export default function BadgeDemo() {
return (
<div className="flex flex-wrap items-center gap-2">
<Badge>Default</Badge>
<Badge variant="muted">Muted</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="muted" size="sm">
Small
</Badge>
</div>
);
}Use
Counts and neutral labels. Use StatusChip for states.
Props
variant (default · muted · secondary), size (default · sm), children.
Notes
Prefer muted; default is the zinc pill.