Badge
Small status indicators used to display metadata, counts, or categorical information. Designed for Fidus's urgency and domain-based system.
Urgency Variants
UrgentImportantNormalLow Priority
Semantic Variants
SuccessWarningErrorInfo
Sizes
SmallMediumLarge
In Context
Appointment ReminderHigh Priority
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'urgent' | 'important' | 'normal' | 'low' | 'success' | 'warning' | 'error' | 'info' | 'normal' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Badge size |
className | string | - | Additional CSS classes |
children* | React.ReactNode | - | Badge content |
Usage Guidelines
When to use
- •For displaying urgency levels (urgent, important, normal, low)
- •For status indicators (success, warning, error, info)
- •For notification counts
- •For categorical labels
Best practices
- •Use urgency variants for Fidus opportunities and tasks
- •Use semantic variants for system feedback
- •Keep badge text short (1-2 words ideal)
- •Don't use badges for long descriptive text
- •Place badges near the content they describe
- •Use consistent variant meanings throughout the app
Accessibility
- •Badge text is readable by screen readers
- •Color is not the only indicator - text provides context
- •Sufficient color contrast for all variants
- •Consider aria-label for icon-only badges
Do's and Don'ts
✓ Do
- •Use short, concise text (1-2 words)
- •Use urgency variants for Fidus opportunities
- •Place badges inline with related content
- •Use consistent variant meanings across the app
Budget AlertHigh
✗ Don't
- •Use badges for long descriptive text
- •Mix urgency and semantic variants inconsistently
- •Use badges as clickable buttons
- •Rely solely on color to convey meaning
This is a very long description that should not be in a badge
Related Components
Button
For interactive actions and commands
Card
Containers that often include badges for status
Table
Use badges in table cells to indicate status