Blazorise Badge Component

Badges are small UI elements used to highlight key information, display status indicators, or show counts in a clear and compact format.

The <Badge> component in Blazorise provides a simple way to display contextual information or metadata alongside other content. Common use cases include labeling items, showing unread message counts, or highlighting states such as Success or Warning. By handling the CloseClicked event, a badge can also become interactive, allowing users to dismiss or respond to its content.

Examples

Basic

Use the Color attribute to quickly set the appearance of a badge. Badges can easily match your application's theme by selecting from predefined color variants.

Hello

<Badge Color="Color.Primary">Hello</Badge>

Color Variants

Customize your badge using the Color parameter to represent different meanings, such as success, warning, or danger. This helps users instantly understand the badge's context.

Primary Secondary Success Danger Warning Info Light Dark

<Badge Color="Color.Primary">Primary</Badge>
<Badge Color="Color.Secondary">Secondary</Badge>
<Badge Color="Color.Success">Success</Badge>
<Badge Color="Color.Danger">Danger</Badge>
<Badge Color="Color.Warning">Warning</Badge>
<Badge Color="Color.Info">Info</Badge>
<Badge Color="Color.Light">Light</Badge>
<Badge Color="Color.Dark">Dark</Badge>

Subtle Colors

In addition to the standard color themes, badges also support subtle color variants. Enable them by setting the Subtle parameter to true for a softer, more modern appearance that works well in light or minimalistic interfaces.

Primary Secondary Success Danger Warning Info Light Dark

<Badge Color="Color.Primary" Subtle>Primary</Badge>
<Badge Color="Color.Secondary" Subtle>Secondary</Badge>
<Badge Color="Color.Success" Subtle>Success</Badge>
<Badge Color="Color.Danger" Subtle>Danger</Badge>
<Badge Color="Color.Warning" Subtle>Warning</Badge>
<Badge Color="Color.Info" Subtle>Info</Badge>
<Badge Color="Color.Light" Subtle>Light</Badge>
<Badge Color="Color.Dark" Subtle>Dark</Badge>

Shape

Add the Pill parameter to create rounded, pill-style badges. This style is great for differentiating badges from buttons or when you want a softer, more organic look.

Pending Confirmed Denied On hold

<Badge Color="Color.Primary" Pill>Pending</Badge>
<Badge Color="Color.Success" Pill>Confirmed</Badge>
<Badge Color="Color.Danger" Pill>Denied</Badge>
<Badge Color="Color.Secondary" Pill>On hold</Badge>

Icon-only Badges

Badges can also display icons without accompanying text. For accessibility, pair icon-only badges with a Tooltip and include an aria-label to describe their purpose for screen readers.

<Badge Color="Color.Success">
        <Tooltip Text="Confirmed">
        <Icon Name="IconName.Check" aria-label="Confirmed" />
        </Tooltip>
</Badge>
<Badge Color="Color.Danger">
        <Tooltip Text="Cancelled">
        <Icon Name="IconName.Times" aria-label="Cancelled" />
        </Tooltip>
</Badge>

Interactive Badges with Close Button

To make a badge dismissible, simply handle the CloseClicked event. Once defined, Blazorise automatically renders a close icon, enabling the user to remove the badge dynamically.

Primary

<Badge Color="Color.Primary" CloseClicked="@(()=>Console.WriteLine("closed"))">Primary</Badge>

Best Practices

Badge vs. Button

Badges and buttons can appear visually similar, which might confuse users into thinking badges are interactive elements. To avoid this, ensure badges are used for displaying information rather than triggering actions.

You can reduce confusion through careful placement, language, shape, and color choices. For example:

Use descriptive or static text instead of action verbs on badges.
Avoid placing badges directly next to buttons with similar colors or shapes.
Consider using the Pill variant to visually differentiate badges from buttons.

API

Parameters

Parameter	Description	Type	Default
`ChildContent`	Specifies the content to be rendered inside this Badge.	`RenderFragment`	`null`
`Classes`	Custom CSS class names for component elements.	`TClasses`	`null`
`Color`	Specifies the contextual Color applied to the badge's background and text.	`Color`	`Color.Default`
`Intent`	Specifies the contextual intent applied to the badge's background and text.	`Intent`	`null`
`Link`	Converts the badge into a clickable link, adding hover and focus interaction states.	`string`
`Pill`	Renders the badge with fully rounded corners, giving it a pill-shaped appearance.	`bool`	`false`
`Styles`	Custom inline styles for component elements.	`TStyles`	`null`
`Subtle`	Enables a softer, subtle version of the current Color, providing a lighter visual style.	`bool`	`false`

Events

Event	Description	Type
`CloseClicked`	Occurs on close button click.	`EventCallback`