Overview

The Badge component displays status indicators, labels, and tags. It uses the BadgeVariant enum to control visual style and Shell.Cn() for class merging.

Installation

shellui add badge

Usage

Default Badge

<Badge>New</Badge>

Variants

The Variant parameter accepts a BadgeVariant enum value:

<div class="flex items-center gap-2">
  <Badge Variant="BadgeVariant.Default">Default</Badge>
  <Badge Variant="BadgeVariant.Secondary">Secondary</Badge>
  <Badge Variant="BadgeVariant.Destructive">Error</Badge>
  <Badge Variant="BadgeVariant.Outline">Outline</Badge>
</div>

Status Badges

<Badge Variant="@(user.IsActive ? BadgeVariant.Default : BadgeVariant.Secondary)">
  @(user.IsActive ? "Active" : "Inactive")
</Badge>

Notification Count

<div class="relative">
  <Button>Notifications</Button>
  <Badge Class="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0">
    3
  </Badge>
</div>

With Inline Icon

<Badge>
  <span class="mr-1">✓</span> Verified
</Badge>

API Reference

Parameter	Type	Default	Description
`Variant`	`BadgeVariant`	`BadgeVariant.Default`	Visual style of the badge
`Class`	`string?`	`null`	Additional CSS classes merged via `Shell.Cn()`
`ChildContent`	`RenderFragment`	—	Badge label content

BadgeVariant Enum

Value	Description
`Default`	Primary filled badge
`Secondary`	Muted secondary style
`Destructive`	Red / error style
`Outline`	Border-only style

Accessibility

Rendered as an inline <span> with proper semantic meaning.
High contrast colors ensure readability in all variants.
Works with screen readers when meaningful text content is provided.

Badge