Status Badges
Status badges using the traffic light system (Green/Amber/Red) for clear, accessible status indication.
Traffic Light Badges
Success Badge
Completed
Active
Verified
Use for: Completed tasks, active subscriptions, verified accounts, successful operations.
Warning Badge
Pending
Expiring Soon
Attention Needed
Use for: Pending reviews, expiring items, actions requiring attention, cautionary states.
Error Badge
Failed
Inactive
Overdue
Use for: Failed operations, inactive accounts, overdue items, error states.
Info Badge
New
Beta
Updated
Use for: New features, beta features, informational states, neutral indicators.
Neutral Badges
Draft
In Review
Scheduled
Use for: Neutral states, categories, tags, non-status indicators.
Badge Sizes
Small
Medium
Large
- Name
Small- Description
12px text, 8px horizontal padding - Dense layouts, table cells
- Name
Medium (Default)- Description
14px text, 12px horizontal padding - Standard usage
- Name
Large- Description
16px text, 16px horizontal padding - Prominent status indicators