Badge - MikaBerglund/Blazor-Bootstrap GitHub Wiki

Badge Component

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

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>
⚠️ **GitHub.com Fallback** ⚠️