Appearance

Updated on Feb 10, 2026

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—Renders a Badge with a medium border radius.
• Large—Renders a Badge with a large border radius.
• Full—Renders a circle shape Badge.

When not explicitly set, the applied theme controls the default border radius.

The None value is deprecated. Use custom CSS instead.

The following example demonstrates the Rounded option of the Badge:

Razor

    @(Html.Kendo().Badge()
        .Name("badge")
        .Text("Custom")
        .Rounded(Rounded.Large)
    )

ThemeColor

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

Starting with the 2026 Q1 release, the Badge component renders with the primary appearance by default. Because appearance defaults are now theme-controlled, the themeColor option will be undefined when not set, but the theme applies the primary styling. To preserve the previous (secondary) look, explicitly set themeColor: 'secondary'.

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)
    )

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
• Large

When not explicitly set, the applied theme controls the default size.

Razor

    @(Html.Kendo().Badge()
        .Name("badge")
        .Text("JS")
        .Size(BadgeSize.Large)
    )

FillMode

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

• Solid
• Outline

When not explicitly set, the applied theme controls the default fill mode.

Razor

    @(Html.Kendo().Badge()
        .Name("badge")
        .Text("JS")
        .FillMode(BadgeFill.Outline)
    )

See Also

• Badge Client-Side API