Status Badge

A compact lifecycle pill that pairs a colored dot with a label. Five fixed statuses cover the canonical operation lifecycle: success, warning, error, idle, pending. Distinct from Badge (free-form, six tones) and RecordBadge (pulsing peak beacon).

IdlePendingSuccessWarningError

Customize

Status

statussuccess

Label & layout

override(default)

show all statuses

Installation

npx shadcn@latest add https://craftbits.dev/r/status-badge.json

Usage

import { StatusBadge } from "@craft-bits/core";
 
<StatusBadge status="success" />
<StatusBadge status="pending">Queued</StatusBadge>

The label defaults to the capitalised status name. Pass any ReactNode as children to override for localisation or domain-specific wording while keeping the canonical dot color.

Props

Prop	Type	Default	Description
`status`	`"success" \| "warning" \| "error" \| "idle" \| "pending"`	required	Lifecycle status — drives both dot color and default label.
`children`	`ReactNode`	derived from `status`	Optional label override.
`className`	`string`	—	Merged onto the rendered root `<span>`.

Accessibility

Root carries role="status" so screen readers politely announce the label on mount and on label changes.
The dot is aria-hidden="true"; the word and the dot agree so color alone never carries meaning.
No animation — prefers-reduced-motion is a no-op.