Badge
Displays a badge or a component that looks like a badge.
Variants
Four badge variants for different use cases.
Usage Examples
Common use cases for badges.
Status Indicators
Notification Counts
Tags/Labels
Feature Flags
In Lists
Badges combined with other components.
Project Alpha
Active development
Project Beta
Under review
Project Gamma
Deployment failed
Project Delta
Planning phase
With Icons
Badges can include icons or other content.
Custom Styling
Override styles with the Class parameter.
Accessibility Notes
Best practices for using badges accessibly.
✓ Keep text concise: Badges work best with 1-2 words or small numbers.
✓ Meaningful content: Badge text should be self-explanatory.
✓ Color alone: Don't rely solely on color to convey meaning. Include text.
✓ Context: Ensure the badge's meaning is clear from surrounding content.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Variant | BadgeVariant | Default | Visual style variant. Options: Default, Secondary, Destructive, Outline. |
| Class | string? | — | Additional CSS classes to apply to the badge element. |
| ChildContent | RenderFragment? | — | The content to display inside the badge (text, icons, numbers, etc.). |