StatusBadge
Status indicator with contextual color and icon for ERP workflow states, compliance checks, and task progress tracking.
Installation
$ npx shadcn@latest add status-badgePreview
Active
Variants
CompletedPending ReviewFailedIn ProgressQueuedLive Dispatch
Usage (React/TSX)
import { StatusBadge } from "@/components/ui/status-badge"
export default function TaskRow() {
return (
<div className="flex items-center justify-between p-3">
<span className="text-zinc-300">Consolidate Q2 Ledger</span>
<StatusBadge variant="success">Completed</StatusBadge>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "success" | "warning" | "error" | "info" | "pending" | "active" | "info" | The visual style and icon. |
| showIcon | boolean | true | Whether to show the status icon. |
| className | string | — | Additional CSS classes to apply. |
| children | ReactNode | — | Label text content. |