Badges
A versatile set of badge indicators, sizes, shapes, and positioned context dots for dashboards and medical registries.
Basic Badges
Standard Rectangular Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Pill Badges (Rounded)
Primary
Secondary
Success
Danger
Warning
Info
Light / Translucent Badges
Standard Light Badges
Primary
Secondary
Success
Danger
Warning
Info
Light Pill Badges
Primary
Secondary
Success
Danger
Warning
Info
Outline Badges
Standard Outline Badges
Primary
Secondary
Success
Danger
Warning
Info
Outline Pill Badges
Primary
Secondary
Success
Danger
Warning
Info
Badges with Icons & Inside Buttons
Badges with Icons
Cardiology
Verified
Critical
Details
Dental
Badges inside Buttons
Positioned Badges
Absolute Positioned Corner Badges
Positioned Profile Context Dots (User Status Indicator)
RC
MW
HB
Example Headings (Auto-Scaling Badges)
Heading H1 New
Heading H2 Update
Heading H3 Success
Heading H4 Critical
Heading H5 Warning
Heading H6 Info
Medical Color Badges (Solid vs Light)
Solid Medical Colors
Clinical Blue
Surgical Teal
Pharmacy Green
Cardiology Red
Lab Yellow
Dental Orange
Pediatric Azure
Maternity Pink
Neurology Purple
Light (Translucent) Medical Colors
Clinical Blue
Surgical Teal
Pharmacy Green
Cardiology Red
Lab Yellow
Dental Orange
Pediatric Azure
Maternity Pink
Neurology Purple
Badge Sizes
Five levels of sizing to adjust badges to any layout requirement.
Extra Small (XS)
Small (SM)
Medium / Default
Large (LG)
Extra Large (XL)
XS Badge
SM Badge
Default Badge
LG Badge
XL Badge