New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Appearance

The Badge offers various options that allow you to control its look and feel.

For a complete example, refer to the Appearance Demo of the Badge.

Options

The Badge provides the following methods for styling:

Rounded()—Specifies the border radius of the component.
ThemeColor()—Configures what color will be applied to the component.
Size()—Defines the overall size of the component.
FillMode()—Creates a solid or an outline Badge.

Rounded

The Rounded property can be configured through the Rounded enumeration. The available values are:

Small—Renders a Badge with a small border radius.
Medium (default)—Renders a Badge with a medium border radius.
Large—Renders a Badge with a large border radius.
Full—Renders a circle shape Badge.
None—Renders a Badge with no border radius (square Badge).

The following example demonstrates the Rounded option of the Badge:

Razor
    @(Html.Kendo().Badge()
        .Name("badge")
        .Text("Custom")
        .Rounded(Rounded.Large)
    )
Razor
    <kendo-badge name="badge"
        text="Custom"
        rounded="Rounded.Large">
    </kendo-badge>

ThemeColor

The ThemeColor option controls the color that will be applied to the rendered Badge.

The available ThemeColor values are:

Primary—Applies coloring based on the primary theme color.
Default—Applies base theme color.
Secondary—Applies coloring based on the secondary theme color.
Tertiary—Applies coloring based on the tertiary theme color.
Inherit—Applies the inherited coloring value.
Info—Applies coloring based on the info theme color.
Success—Applies coloring based on the success theme color.
Warning—Applies coloring based on the warning theme color.
Error—Applies coloring based on the error theme color.
Dark—Applies coloring based on the dark theme color.
Light—Applies coloring based on the light theme color.
Inverted—Applies coloring based on the inverted theme color.

Razor
   @(Html.Kendo().Badge()
        .Name("badge")
        .Text("user")
        .ThemeColor(BadgeColor.Primary)
    )
Razor
    <kendo-badge name="badge"
        text="user"
        theme-color="BadgeColor.Primary">
    </kendo-badge>

Size

The Size option allows you to set a predefined size for the Badge. The Size property can be configured by using the BadgeSize enumeration. The available values are:

Small
Medium (Default)
Large

Razor
    @(Html.Kendo().Badge()
        .Name("badge")
        .Text("JS")
        .Size(BadgeSize.Large)
    )
Razor
    <kendo-badge name="badge"
        text="JS"
        size="BadgeSize.Large">
    </kendo-badge>

FillMode

The FillMode specifies how the theme colors are applied to the component. The available options are:

Solid (Default)
Outline

Razor
    @(Html.Kendo().Badge()
        .Name("badge")
        .Text("JS")
        .FillMode(BadgeFill.Outline)
    )
Razor
    <kendo-badge name="badge"
        text="JS"
        fill-mode="BadgeFill.Outline">
    </kendo-badge>