Badge

v0.4.4
Stable

A small status label with semantic color variants.

pnpm add @behivetech/atoms.badge

You are viewing Badge v0.4.4, snapshotted 2026-11-09. The latest is v0.4.5. Go to the latest →

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, …).