New to Telerik UI for Blazor? Start a free 30-day trial

Appearance Settings

The Badge component features built-in appearance parameters that allow you to customize virtually every aspect of its look and feel.

FillMode

You can toggle the Badge border and background by setting the FillMode parameter to a member of the Telerik.Blazor.ThemeConstants.Badge.FillMode class:

Class members	Manual declarations
`Solid` (default value)	`solid`
`Flat`	`flat`
`Outline`	`outline`

Refer to the example below to customize the available parameters and observe their impact on the Badge component.

Rounded

The Rounded parameter applies the border-radius CSS rule to the Badge and lets you curve its edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.Badge.Rounded class:

Class members	Manual declarations
`Small`	`sm`
`Medium`	`md`
`Large`	`lg`
`Full` (default value)	`full`

Refer to the example below to customize the available parameters and observe their impact on the Badge component.

Size

You can increase or decrease the size of the Badge by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.Badge.Size class:

Class members	Manual declarations
`Small`	`sm`
`Medium` (default value)	`md`
`Large`	`lg`

Refer to the example below to customize the available parameters and observe their impact on the Badge component.

ThemeColor

You can change the color of the Badge by setting the ThemeColor parameter to a member of the Telerik.Blazor.ThemeConstants.Badge.ThemeColor class:

Class members	Manual declarations
`Base`	`base`
`Primary`	`primary`
`Secondary`	`secondary`
`Tertiary`	`tertiary`
`Info`	`info`
`Success`	`success`
`Warning`	`warning`
`Error`	`error`
`Dark`	`dark`
`Light`	`light`
`Inverse`	`inverse`

Refer to the example below to customize the available parameters and observe their impact on the Badge component.

Example

The following example lets you experiment with the available settings that control the appearance of the Badge. It starts with the default component behavior.

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <label>
                Theme Color
                <TelerikDropDownList Data="@ThemeColors" @bind-Value="@ThemeColor"></TelerikDropDownList>
            </label>
        </div>
        <div class="col-md-3">
            <label>
                FillMode
                <TelerikDropDownList Data="@FillModes" @bind-Value="@FillMode"></TelerikDropDownList>
            </label>
        </div>
        <div class="col-md-3">
            <label>
                Rounded
                <TelerikDropDownList Data="@RoundedValues" @bind-Value="@Rounded"></TelerikDropDownList>
            </label>
        </div>
        <div class="col-md-3">
            <label>
                Size
                <TelerikDropDownList Data="@Sizes" @bind-Value="@Size"></TelerikDropDownList>
            </label>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-center">
            <TelerikButton>
                Notifications
                <TelerikBadge ThemeColor="@ThemeColor"
                              Rounded="@Rounded"
                              FillMode="@FillMode"
                              Size="@Size">
                    10
                </TelerikBadge>
            </TelerikButton>
        </div>
    </div>
</div>

@code {
    private string ThemeColor { get; set; } = ThemeConstants.Badge.ThemeColor.Primary;
    private List<string> ThemeColors { get; set; } = new List<string>()
    {
        "base",
        "primary",
        "secondary",
        "tertiary",
        "info",
        "success",
        "warning",
        "error",
        "dark",
        "light",
        "inverse"
    };

    private string FillMode { get; set; } = ThemeConstants.Badge.FillMode.Solid;
    private List<string> FillModes { get; set; } = new List<string>()
    {
        "solid",
        "flat",
        "outline"
    };

    private string Rounded { get; set; } = ThemeConstants.Badge.Rounded.Full;
    private List<string> RoundedValues { get; set; } = new List<string>()
    {
        "sm",
        "md",
        "lg",
        "full"
    };

    private string Size { get; set; } = ThemeConstants.Badge.Size.Medium;
    private List<string> Sizes { get; set; } = new List<string>()
    {
        "sm",
        "md",
        "lg"
    };
}