Badge

v0.4.5
Stable

A small status label with semantic color variants.

pnpm add @behivetech/atoms.badge

This is the snapshot of v0.4.5, the current version, as recorded on 2026-11-10. The live page runs its examples →

A small status label with semantic color variants.

Variants

1<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
2  <Badge variant="default">Default</Badge>
3  <Badge variant="primary">Primary</Badge>
4  <Badge variant="success">Success</Badge>
5  <Badge variant="warning">Warning</Badge>
6  <Badge variant="error">Error</Badge>
7  <Badge variant="info">Info</Badge>
8</div>

Sizes

1<div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
2  <Badge variant="primary" size="sm">
3    Small
4  </Badge>
5  <Badge variant="primary" size="md">
6    Medium
7  </Badge>
8</div>

Examples

Open all 7 →
Default Badge
1const DefaultBadge = () => <Badge variant="default">Default</Badge>;
2

3render(<DefaultBadge />);
Primary Badge
1const PrimaryBadge = () => <Badge variant="primary">Primary</Badge>;
2

3render(<PrimaryBadge />);

Properties

Badge props

PropTypeDefaultDescription
childrenReactNode—Content to render inside the badge
classNamestring—Additional class names to merge with the component root element
size"sm" | "md"mdControls the size; defaults to md
variant"default" | "primary" | "success" | "warning" | "error" | "info"defaultControls the color scheme; defaults to default

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).