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.

Examples

Basic

Simply set the Color attribute and you’re good to go.

Hello

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

Colors

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>

Shape

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>

Icon-only

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" />
    </Tooltip>
</Badge>
<Badge Color="Color.Danger">
    <Tooltip Text="Cancelled">
        <Icon Name="IconName.Times" aria-label="Cancelled" />
    </Tooltip>
</Badge>

With close button

To enable close button you only need to define the CloseClicked event. Blazorise will automatically pickup and show close button.

Primary

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

API

Attributes

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`