React Badge Component

NeutralPrimaryActivePendingFailed

NewOverdue

Installation

pnpm add krz-ui

import { Badge } from "krz-ui";

<Badge color="success" dot>Active</Badge>
<Badge appearance="solid" color="primary">New</Badge>

Prop	Type	Description
`color`	`"neutral" \| "primary" \| "success" \| "warning" \| "danger" \| "info"`	Color scheme.
`appearance`	`"soft" \| "solid" \| "outline"`	Visual style.
`size`	`"sm" \| "md"`	Badge size.
`dot`	`boolean`	Show a status dot.
`pulse`	`boolean`	Gently pulses the dot for a live status, e.g. Active or Online. Stops when the user prefers reduced motion.
`className / style / ref`	`—`	All go to the outer element. See Customization.
`classNames`	`{ dot? }`	Extra classes for inner parts.