Badges
Badges are small, colored labels used to display additional information such as status, category, or tags to ensure consistency across the design system.
Preview | Design Token | Color Value |
---|
Badge Styles
Each badge follows a predefined set of colors:
- Neutral: Uses
neutral-1000
for the border. - Brand, Product, Info, Success, Warning, Critical: Use their respective
500
token for the border. - Background: Always white.
- Size: 25px height.
Example: Badge Styles with Design Tokens
The following CSS classes define badge colors dynamically:
.badge-neutral { border-color: var(--neutral-1000); color: var(--neutral-1000); }
.badge-brand { border-color: var(--brand-500); color: var(--brand-500); }
.badge-product { border-color: var(--product-500); color: var(--product-500); }
.badge-info { border-color: var(--info-500); color: var(--info-500); }
.badge-success { border-color: var(--success-500); color: var(--success-500); }
.badge-warning { border-color: var(--warning-500); color: var(--warning-500); }
.badge-critical { border-color: var(--critical-500); color: var(--critical-500); }