# Badge

Source: https://lumeo.nativ.sh/components/badge

# Badge

Displays a small status indicator or label.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Variants

Default

Secondary

Outline

Destructive

Success

Warning

Preview Code

Sizes & Pill

Small

Medium

Large

99+

New

Online

Preview Code

Variant (interactive)

Switch variant to see the badge update live.

Default Secondary Outline Destructive Success Warning

Default

Preview Code

Usage Examples

Status

Active

Priority

High

Version

v1.0.0

Build

Pending

Preview Code

In a Card

### Notifications

3 new

You have unread messages.

Preview Code

Dot Badge

Preview Code

Removable Badge

Blazor

C#

.NET

Tailwind

Preview Code

Animated Entrance

New

Success

Error

Hide badges

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

Preview Code

Counter with Animated Badge

Add notification

1

Clear

## 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

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](/components/alert) — Use for prominent inline messages instead of small status indicators
-   [Toggle](/components/toggle) — Use when a badge-like element needs to be toggled on or off
-   [Tooltip](/components/tooltip) — Use to provide additional context on hover for a badge