10Shipped
StatusBadge
Agent workflow state summary: scanning, queued, posted, error.
Import
import { StatusBadge } from "@charply/design"Variants
Agent states
Scanning
Finding relevant posts
Queued
Waiting for review
Posted
History updated
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Main status label | |
| description | string | Supporting detail text | |
| tone | "info" | "active" | "success" | "warning" | "error" | "neutral" | Visual tone | |
| icon | ReactNode | Icon element (use size-5) |
Guidelines
docs/design/components/statusbadge.mdDo
- ✓Use `StatusBadge` for agent workflow state only (not for generic category tagging — use `Badge` instead).
- ✓Pair with a relevant Lucide icon at `size-5`.
Don't
- ✗Use `StatusBadge` for metadata labels — use the regular `Badge`.
- ✗Stack multiple `StatusBadge` instances unless showing a timeline of states.
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.