On this page
Proposed CSC Standards · 0.1.0
Badges and statuses
A short status word with a tone.
Show a record state such as Pending or Approved.
What this describes
When to use
- A status that fits in one or two words.
- The status is also written as text.
When not to use
- A sentence of guidance. Use Alert.
- An action. Use Button.
Allowed variants
In progress
Work that is underway.
- Hierarchy
- Informational.
- Use in
- Records.
- Restriction
- Include the words.
- Accessibility
- Text, not a dot.
- Responsive
- Wraps inside a table cell or card.
Approved
A positive decision.
- Hierarchy
- Success tone.
- Use in
- Records.
- Restriction
- The word Approved is present.
- Accessibility
- Not color alone.
- Responsive
- Same wrap.
Pending
Waiting on a person.
- Hierarchy
- Warning tone.
- Use in
- Queues.
- Restriction
- Do not use amber for errors.
- Accessibility
- Check contrast on the amber fill.
- Responsive
- Same wrap.
Rejected
A negative decision.
- Hierarchy
- Danger tone.
- Use in
- Records.
- Restriction
- The word carries the meaning.
- Accessibility
- Not color alone.
- Responsive
- Same wrap.
Draft
Not yet submitted.
- Hierarchy
- Neutral.
- Use in
- Drafts.
- Restriction
- Do not use gray for disabled buttons.
- Accessibility
- Text remains 4.5:1.
- Responsive
- Same wrap.
Mandatory rules
Put the status in text
The badge children are the status words. Tone is additional.
Implementation detail
WCAG 1.4.1. A colored dot without a word fails.
Put the status word in the badge. Color is additional.
Check: The status can be read with styles disabled.
Do not use a badge as a button
Badge is not interactive.
Implementation detail
Proposed CSC Standard. Adding onClick to a span skips the button rules.
If the status is clickable, use a button that contains the status text. A colored pill alone is not a button.
Check: The badge element has no click handler.
Keep text contrast on every tone
Blue, green, amber, red, and gray badges keep 4.5:1 for their text.
Implementation detail
WCAG 1.4.3 applies to the badge label.
Use the documented badge fills and text colors. Do not lighten the text.
Check: Measure text against the badge fill before shipping a new tone.
Restrictions
- BDG-002 Do not use a badge as a button. Badge is not interactive.
Accessibility
- Status is a word.
- Contrast is checked per tone.
- The badge is not a control.
Responsive behavior
- Badges wrap with the row. They do not set a min-width that overflows.
Component states
Static
Read-only status text.
Correct implementation
The status word is text. The amber wash is additional.
Imports: None. Dependencies: None. Rules: BDG-001.
export function PendingStatus() {
return <span style={{ background: '#FFF4DB', color: '#9B6B10', borderRadius: 99, padding: '5px 9px', fontWeight: 750 }}>Pending</span>;
}Incorrect implementation
No incorrect example is published for this component.
Common mistakes
- Color-only dots.
- Clickable badges.
Testing checklist
Agent prompts for this component are in the AI Development Hub.