Appearance

Updated on Feb 10, 2026

The Badge allows you to set different styles based on its content.

For a live example, visit the Appearance Demo of the Badge.

Rounded

The available rounded values are:

• "full" (default)—Renders a circle shape badge.
• "small"—Renders a badge with small border radius.
• "medium"—Renders a badge with medium border radius.
• "large"—Renders a badge with large border radius.
• "none"—Renders a badge with no border radius.

The following example demonstrates the rounded option of the Badge:

    <a class="k-button"><span id="badge">42</span></a>

    <script>
        $(document).ready(function(){
            $("#badge").kendoBadge({
                rounded: "large"
            });
        });
    </script>

Theme Color

The Badge allows you to specify predefined theme colors.

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" (Default)—Applies coloring based on the primary theme color.
• "base"-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.
• "inverse"—Applies coloring based on the inverted theme color.
• "none"-will apply no theme color class.

    <a class="k-button"><span id="badge">42</span></a>

    <script>
        $(document).ready(function(){
            $("#badge").kendoBadge({
                themeColor: 'success'
            });
        });
    </script>

Size

The Badge allows you to configure the size. To specify a size, set the size property.

The available size values are:

• "small"
• "medium" (Default)
• "large"
• "none"

The example below demonstrates how to set the size option to "large":

    <a class="k-button"><span id="badge">42</span></a>

    <script>
        $(document).ready(function(){
            $("#badge").kendoBadge({
                size: 'large'
            });
        });
    </script>

FillMode

The Badge enables you to set styling options and create solid or outline badges by setting the fill property.

The available fill values are:

• "solid" (Default)
• "outline"
• "none"

The example below demonstrates how to set the fill option to "outline":

    <a class="k-button"><span id="badge">42</span></a>
    <script>
        $(document).ready(function(){
            $("#badge").kendoBadge({
                fill: 'outline'
            });
        });
    </script>

See Also

• Basic Usage of the Badge (Demo)
• JavaScript API Reference of the Badge