Badge Appearance

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

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.

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