Badge Component
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
Custom Styling
Override styles with the Class parameter.
With Icons
Badges can include icons or other content.
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
Variant
Type: BadgeVariant
The visual style variant. Options: Default, Secondary, Destructive, Outline.
Default: Default
Class
Type: string?
Additional CSS classes to apply to the badge element.
ChildContent
Type: RenderFragment?
The content to display inside the badge (text, icons, numbers, etc.).