Badge 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:

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

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

   @(Html.Kendo().Badge()
        .Name("badge")
        .Text("user")
        .ThemeColor(BadgeColor.Primary)
    )

    <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

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

    <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

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

    <kendo-badge name="badge"
        text="JS"
        fill-mode="BadgeFill.Outline">
    </kendo-badge>

See Also

• Badge Client-Side API