Badge
Displays a small count or status indicator
SSR mode
Examples
Default
Default
Sizing
Small
Medium
Large
Color Schemes
Neutral
Primary
Danger
Success
Warning
Yellow
Teal
Cyan
Blue
Pink
Bold variant
Bold
Bold
Bold
Bold
Bold
Bold
Bold
Bold
Bold
Bold
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Badge | Inline pill-shaped chip for status, counts, or tags. Colour is controlled by ColorScheme, visual weight by Variant, and height by Size. |
Badge
Inline pill-shaped chip for status, counts, or tags. Colour is controlled by ColorScheme, visual weight by Variant, and height by Size.
| Property | Type | Required | Description |
|---|---|---|---|
| Size | BadgeSize | Height + text size. Default: BadgeSize.Md. Other values: Sm, Lg. | |
| Variant | BadgeVariant | Visual weight. Default: BadgeVariant.Default (normal). Other value: Bold (uppercase + bold). | |
| ColorScheme | BadgeColor | Colour palette. Default: BadgeColor.Neutral. Other values: Primary, Danger, Success, Warning, Yellow, Teal, Cyan, Blue, Pink. | |
| ClassName | string? | Extra CSS classes appended to the badge. | |
| ChildContent | RenderFragment? | Badge label — usually a short string or an inline Icon + text. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the badge span. |