CSC Design System Components
CS
← All components
COMPONENTS / DATA DISPLAY

Badges and statuses

Compact status labels that pair color with text.

standardv1.0.0verifiedFigma linked
Live previewUpdated 2026-10-09 · CSC Design System
In progress
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.