Components / Properties / StatusBadge
Status
FreeComponentA compact semantic property indicator for common lifecycle states.
Demo dataResponsive
ActiveNeeds reviewBlockedArchived
Installation
pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/status-badge.jsonThe shadcn CLI writes the source into your project. Files added:
- components/elements/status-badge.tsxcomponent
- components/ui/badge.tsxui
- lib/utils.tslib
Dependencies@base-ui/reactclass-variance-authorityclsxtailwind-merge
API
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | ReactNode | — | |
| status | keyof typeof variants | 'neutral' |
Accessibility
- Status is carried by the visible text you pass, with color as a second signal.