Lumeo

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.

Blazor
C#
.NET
Tailwind
New
Success
Error

Each toggle remounts the badges, replaying the pop-in.

1

Keyboard Interactions

Key Action
TabMove focus to the remove button when the badge is removable
EnterActivate the remove button to dismiss the badge
BackspaceRemove 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

Property Type Default Description
Variant BadgeVariant Default Visual style of the badge. Values: Default, Secondary, Destructive, Outline, Success, Warning.
Size Badge.BadgeSize Md Badge size. Values: Sm, Md, Lg.
Pill bool false When true, renders fully rounded (pill shape) — ideal for count / quota chips.
IsDot bool false When true, renders as a small dot indicator without text content.
IsRemovable bool false When true, displays a remove button inside the badge.
OnRemove EventCallback — Callback invoked when the remove button is clicked.
Animated bool false When true, the badge plays a one-shot pop-in (scale + opacity) entrance animation on mount.
IconContent RenderFragment? null Optional slot rendered before the label (icon).
Pulse bool false Adds a subtle pulsing animation to draw attention.

Related Components

  • Alert — Use for prominent inline messages instead of small status indicators
  • Toggle — Use when a badge-like element needs to be toggled on or off
  • Tooltip — Use to provide additional context on hover for a badge