Badge
A compact status or category label.
Usage
import { Badge } from "@kanzo-tech/ui";<Badge variant="success">Mapped</Badge>Variants
The status variants (success / warning / destructive / info) read their hue from the
status tokens, so a theme change re-skins them without touching the component.
Sizes
xs is the micro-badge used for inline counters.
Pinning one onto a region
A badge tagged onto the corner of something — Ant's Badge.Ribbon shape — is
Float plus a Badge, not a component of its own. Gating the region as
well as labelling it is one attribute more:
The corner badge overhangs its wrapper so it reads as a tag pinned on the thing, which means
any ancestor that scrolls or hides overflow will clip it — leave the wrapper room. Use inert
rather than aria-hidden on a gated region: the feature stays readable, still telling the user
it exists, while being unreachable by pointer, focus and assistive tech alike.
API Reference
badgeVariants is exported for styling something badge-shaped that is not a Badge — a link, a <summary> — without restating the seven fills.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "secondary" | "outline" | "success" | "info" | "warning" | "destructive" | "default" |
size | "xs" | "sm" | "md" | "lg" | "md" |
pill | boolean | false |
Extends React.ComponentProps<typeof ark.span>, so ref and every native span prop pass
through. variant and size are mirrored to data-variant / data-size, and asChild turns
the badge into an <a> or a <button> — which is what the hover states and the coarse-pointer
hit target are written for. The BadgeVariant type is exported.