RiskBadge
A Zika-specific badge component for displaying risk levels with semantic colors and trauma-informed messaging. Built on the Badge component with predefined risk level configurations.
Risk Levels
No known Zika transmission in this area
Mosquitoes that can carry Zika are present, but no active transmission
Zika transmission has occurred in the past
Active Zika transmission is currently occurring
Compact Style
In Context
San Juan, Puerto Rico
Last updated: 2 hours ago
Miami, Florida
Last updated: 1 day ago
Usage Example
No Risk
Vector Present
Past Transmission
Current Transmission
Active
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| level | string | 'none' | Risk level: none, vector_present, past_transmission, current_transmission |
| compact | boolean | false | Use shorter label text |
| class | string | '' | Additional CSS classes |
Risk Level Details
No Risk
No known Zika transmission. Standard precautions recommended.
Vector Present
Mosquitoes capable of transmitting Zika are in the area. Consider using repellent.
Past Transmission
Zika has been transmitted here before. Stay informed about current conditions.
Current Transmission
Active Zika transmission. Review protective measures and consult healthcare providers.
Key Features
Semantic Risk Levels
Four predefined levels with appropriate colors and icons
Trauma-Informed
Clear, non-alarming language that empowers users
Built on Badge
Inherits all Badge component features and styling
Compact Mode
Shorter labels for space-constrained layouts