Badge
Displays a small status indicator or label.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Badge />
When to Use
- Label items with a status such as active, pending, or error
- Show notification counts on icons or navigation items
- Categorize content with color-coded tags
- Highlight priority levels, versions, or feature flags
- Display removable filter chips in search or tag inputs
Default
Secondary
Outline
Destructive
Success
Warning
Small
Medium
Large
99+
New
Online
Switch variant to see the badge update live.
Default
Status
Active
Priority
High
Version
v1.0.0
Build
Pending
Notifications
3 new
You have unread messages.
Verified
Active
Warning
Live
Blazor
C#
.NET
Tailwind
New
Success
Error
Each toggle remounts the badges, replaying the pop-in.
1
Keyboard Interactions
| Key | Action |
|---|---|
| Tab | Move focus to the remove button when the badge is removable |
| Enter | Activate the remove button to dismiss the badge |
| Backspace | Remove the badge when focused (removable badges) |
Non-removable badges are display-only and have no keyboard interactions.
Parameter Coverage
Every BadgeVariant value rendered live.
BadgeVariant
Default
Default
Secondary
Secondary
Destructive
Destructive
Outline
Outline
Success
Success
Warning
Warning
API Reference
Badge
IconContent renders before the label. Density falls back to an ancestor
DensityScope, then Comfortable —
see the Density guide.
Every BadgeVariant value is demonstrated live under Parameter Coverage above.