Badge
Compact label for status, category or count.
Platform under construction
Badges & Alerts
Badges and alerts are small status components. Their job is to communicate state quickly without becoming visual noise.
.badge { border-radius: 999px; padding: .35rem .65rem; }
.alert { border-left: 4px solid currentColor; padding: 1rem; }
Component mental model
Status components should be instantly understandable.
Badges label content. Alerts interrupt or warn. They are related, but they do not have the same visual weight.
Good status styling uses text, color, shape and sometimes icons. Color alone is not enough.
A design system should define status variants such as info, success, warning, danger and neutral.
Alert
Block-level message that needs attention.
Variant
Info, success, warning, danger and neutral each need meaning.
Contrast
Status colors must remain readable.
Visual model
See the parts of the component before styling the surface.
Helpful
Blue or neutral guidance.
Complete
Positive confirmation.
Careful
Attention without panic.
Problem
Clear error or destructive risk.
Good CSS versus fragile CSS
Status variants with text
.badge { border-radius: 999px; padding: .35rem .65rem; font-weight: 800; }
.badge--success { background: #dcfce7; color: #14532d; }
.alert { border-left: 4px solid currentColor; padding: 1rem; }Color-only meaning
.status-good { color: green; }
.status-bad { color: red; }
.alert { background: yellow; }Rules of thumb
Components need systems, not one-off decoration.
Separate badge and alert
A tiny label and an interrupting message need different visual weight.
Use text with color
Status should remain clear without relying on color alone.
Keep variants consistent
Danger should not sometimes mean warning.
Protect contrast
Soft backgrounds still need readable foreground text.
Avoid alert fatigue
If everything is urgent, nothing is urgent.
Use icons carefully
Icons can help but should not replace text meaning.
Production thinking
A component is only good when real content and real states still work.
Why does this matter?
Status components control attention. Clear status reduces cognitive load; noisy status creates distrust.
Accessibility
Use text labels and sufficient contrast. For dynamic alerts, behavior and ARIA live regions may be needed outside CSS.
Production note
Document each status variant and use the same meaning across the product.
SEO note
Badges and alerts mainly support comprehension, not ranking, but clearer pages keep users oriented.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Remove the words Completed and Needs review and explain why color alone is weak.
- Create an info variant and choose readable foreground color.
- Make every alert red and explain why alert fatigue appears.
Practice assignment
Do this before moving to the next lesson.
- Create at least three badge variants.
- Create one alert with text and strong contrast.
- Explain the difference between a badge and an alert.
Try it yourself
Create badge and alert variants
Self-check
Before you continue, prove that you understand Badges & Alerts.
Answer these questions before moving on. If a state, long label or mobile width breaks the component, the component is not finished yet.
- Can you define badge versus alert?
- Can you avoid relying only on color?
- Can you keep contrast readable in soft status colors?
- Can you prevent every message from looking urgent?
- Can you document status meanings consistently?
Senior audit upgrade
Status cannot depend on color alone.
Badges and alerts often use color, but users should understand the state even if color perception differs.
Text label
Write the status in words, not only as green or red.
Icon or shape
Use an icon or visual form to support the message.
Urgency
A tiny badge and an interrupting alert need different visual weight.