COMPONENTS / DATA DISPLAY
Badges and statuses
Compact status labels that pair color with text.
standardv1.0.0verifiedFigma linked
Design variations
In progress
Approved
Pending
Rejected
Draft
Implementation
// npx github:rbillyjames0221/csc-ui init
import '@csc/ui/styles.css';
import { Badge } from '@csc/ui';
export function Example() {
return (
<Badge tone="blue">In progress</Badge>
);
}Agent prompt
Copy a prompt for this component from the AI Development Hub.
When to use it
Compact status labels that pair color with text.
Dependencies: None beyond React. Source: packages/ui/src/badge.tsx. 1.0.0 — Five semantic tones.