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"
    };
}