Badge
Status indicators for damage levels, sync states, verification, and metadata labels. Badges are non-interactive — they communicate state at a glance.
Preview — Damage Level Badges
Minimal
Partial
Complete
Preview — Sync State & Metadata Badges
Synced
Pending sync
Sync failed
Verified
AR
Variants
Default
Minimal
Partial
Complete
Synced
Pending
Failed
Draft
Verified
Info
EN
| Variant | Color | Usage |
|---|---|---|
| minimal | Green + dot | Minimal damage classification |
| partial | Amber + dot | Partial damage classification |
| complete | Red + dot | Complete destruction classification |
| synced | Green | Report successfully uploaded |
| pending | Amber | Queued for upload |
| failed | Red | Upload failed |
| draft | Slate | Report saved locally, not submitted |
| verified | RAPIDA Blue (solid) | Coordinator-verified report |
| info | RAPIDA Blue (subtle) | Informational labels |
| language | Slate | Language code indicators (EN, AR, NE) |
Sizes
Default size
default
Large size
lg
Accessibility
- Badges are non-interactive
<span>elements — they have no focus state. - Color dots are decorative (
aria-hidden) — the text label carries the meaning. - Damage level badges pair color with a colored dot and text — three channels of information.
- Badge text should be descriptive: "Sync failed" not just "Failed."
Trauma-Informed Design
- Damage levels use intuitive green/amber/red progression — universally understood.
- Sync state badges provide immediate feedback on connectivity — critical in field conditions.
- "Verified" badge uses a solid rapida-blue background to stand out as authoritative confirmation.
- Badge text avoids jargon — "Pending sync" not "Queued for remote persistence."