Blazorise Badge component

Badges are used to draw attention and display statuses or counts.

The <Badge> component is used to convey small pieces of information. They are used for labeling content, displaying metadata and/or highlighting information. Using the CloseClicked property, the badge becomes interactive, allowing user interaction.



Simply set the Color attribute and you’re good to go.
<Badge Color="Color.Primary">Hello</Badge>


Add any of the following variants via the Color parameter to change the appearance of a Badge.
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>


Applying the Pill parameter produces a badge with rounded corners. It can aid in making badges and buttons more distinct from one another.
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>


Badges can also be used with icons without a label. For accessibility, a Tooltip and aria-label attribute is recommended to ensure that all users can identify their meaning.
<Badge Color="Color.Success">
    <Tooltip Text="Confirmed">
        <Icon Name="IconName.Check" aria-label="Confirmed" />
<Badge Color="Color.Danger">
    <Tooltip Text="Cancelled">
        <Icon Name="IconName.Times" aria-label="Cancelled" />

With close button

To enable close button you only need to define the CloseClicked event. Blazorise will automatically pickup and show close button.
<Badge Color="Color.Primary" CloseClicked="@(()=>Console.WriteLine("closed"))">Primary</Badge>

Best Practices

Badge vs Button

Badges and Buttons are similar in appearance. This might lead users to think that badges are interactive.

Placement, language, shape, and color can all help mitigate any confusion. First, badges should not be labeled with active verbs. This is because they are not actions but relatively static text/content. Second, avoid placing badges directly next to Buttons, in particular, if they are using similar themes. The pill theme variant may aid in making badges and Buttons more distinct from one another.



Name Description Type Default
Pill Makes badges more rounded. bool false
Link Create a badge link and provide actionable badges with hover and focus states. bool null
Color Component visual or contextual style variants. Color Default
CloseClicked Occurs on close button click. EventCallback
On this page