Primitives
Badge
A versatile badge component for displaying statuses, labels, and indicators. Essential for patient status, insurance verification, and appointment tracking in healthcare applications.
Variants
Use semantic variants to convey meaning. Success for completed/active states, warning for pending/caution, error for critical issues, info for informational status, and neutral for default states.
Sizes
Choose the appropriate size based on context. Use smaller badges for inline text, medium for lists, and large for prominent displays.
With Icons
Icons enhance badge meaning and help users quickly identify status. Use appropriate icons that match the semantic meaning of the badge.
As Status Indicators
Use badges to display patient status, insurance verification, appointment types, and workflow states throughout healthcare applications.
Pill Shape
Use pill-shaped badges for a softer, more modern appearance. Great for patient-facing interfaces.
Dot Indicators
Use dot-only badges for compact status indicators in lists, tables, or tight spaces. Perfect for showing status without taking up much space.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'outline' | 'neutral' | Semantic status/variant of the badge |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the badge |
pill | boolean | false | Renders as a fully rounded pill shape |
dot | boolean | false | Renders as a dot indicator without text |
icon | Snippet | — | Icon slot to display before the badge text |
class | string | — | Additional CSS classes |
children | Snippet | — | Badge content (text or mixed content) |
Healthcare Best Practices
- • Use
status="error"for critical patient safety issues or expired insurance - • Use
status="warning"for items requiring attention but not immediately critical - • Use
status="success"for verified, active, or completed states - • Always include icons for status badges to improve visual recognition and accessibility
- • Use consistent badge colors across the application to maintain semantic meaning
- • Consider colorblind users - ensure badges have sufficient contrast and include text labels
- • Use dot indicators sparingly and always provide text context nearby for clarity