Badge
Inline status label for risk levels, statuses, and pills. Supports 6 variants × 3 tones = 18 combinations.
Variants & Tones
Each variant (neutral, primary, secondary, success, warning, error) comes in three tones: solid, soft, and outline.
Solid
Neutral
Primary
Secondary
Success
Warning
Error
Soft
Neutral
Primary
Secondary
Success
Warning
Error
Outline
Neutral
Primary
Secondary
Success
Warning
Error
Sizes
Small Badge
Medium Badge
With Icons
Badges can include optional leading icons for additional context.
Verified
Alert
Critical
Protected
Info
Use Case: Risk Levels
Badges are ideal for displaying Zika risk levels with clear visual hierarchy.
Low Risk
Moderate Risk
High Risk
Very High Risk
Use Case: Status Labels
Draft
Active
Published
Pending
Archived
Accessibility
- All color combinations meet WCAG 2.1 AA contrast requirements
- Icons use currentColor for proper color inheritance
- Semantic color variants (success, warning, error) provide clear meaning
- Text remains readable in all tone variations
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | string | 'neutral' | neutral, primary, secondary, success, warning, error |
| tone | string | 'solid' | solid, soft, outline |
| size | string | 'md' | sm, md |
| icon | string | null | Optional icon name |
| class | string | '' | Additional CSS classes |
Usage Example
<x-building-blocks.badge variant="success" tone="solid" icon="check">
Low Risk
</x-building-blocks.badge>
<x-building-blocks.badge variant="warning" tone="soft">
Moderate Risk
</x-building-blocks.badge>
<x-building-blocks.badge variant="error" tone="outline" size="sm">
High Risk
</x-building-blocks.badge>