Badge component


Small and adaptive tag for adding context to just about any content.


Basic usage

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

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

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>


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