Badge

Badge Component

The Badge component is used to add counts and labels to other components.

Inheritance

Badge : ColoredBootstrapComponentBase

Parameters

The Badge component exposes the following public parameters.

Name	Type	Description
IsPill	bool	A pill is a badge with rounded corners.
Link	string	Make the badge into a link by specifying a URL (either absolute or relative) with this parameter.

Examples

Below are a few examples that demonstrate how to use the Badge component. Be sure to check out also the Bootstrap samples.

With Headings

<Heading Level="HeadingLevel.H1">
    Example heading <Badge Color="NamedColor.Primary">New</Badge>
</Heading>

With Buttons

<Button Color="NamedColor.Light">
    Inbox <Badge Color="NamedColor.Primary" IsPill="true">3</Badge>
</Button>

Different Colors

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

Links

<Badge
    Color="NamedColor.Primary"
    Link="https://github.com/MikaBerglund/Blazor-Bootstrap/wiki"
>
    Wiki
</Badge>