Badge
Badges are used to highlight status, categories, or metadata. They come in multiple color variants and sizes.
Variants
Base Variants
PrimarySecondaryJadeTealPineOutlineNeutral
Clinical Insight Variants
InfoWarningCriticalPositive
Badge Sizes
SmallMediumLarge
Use Cases
Status Indicators
Match clinical insight colors
InfoWarningCriticalPositive
Categories
LabMedsEncounters
Counts
31299+
Tags
HypertensionDiabetesCKD Stage 3
Color Mapping
How badge variants map to design system colors.
| Variant | Background | Foreground | Use Case |
|---|---|---|---|
| primary | Vibrant Forest (#2F5E52) | #FFFFFF | Primary actions, emphasis |
| secondary | Ivory Dark (#E5E4DF) | Slate Dark (#191919) | Subtle labels, counts |
| jade | Jade Green (#388E3C) | #FFFFFF | Success, active status |
| teal | Glacier Teal (#5A7D7C) | #FFFFFF | Links, selections, labs |
| pine | Midnight Pine (#1B3A34) | #FFFFFF | Premium, encounters |
| info | Steel Blue (#4A7A8C) | #FFFFFF | Informational alerts |
| warning | Golden Resin (#D9A036) | Slate Dark (#191919) | Caution, attention needed |
| critical | Berry Red (#C24E42) | #FFFFFF | Urgent, critical alerts |
| positive | Jade Green (#388E3C) | #FFFFFF | Favorable findings |
Props
| Prop | Type | Default |
|---|---|---|
| variant | primary | secondary | jade | teal | pine | outline | neutral | info | warning | critical | positive | primary |
| size | sm | md | lg | md |