New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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

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

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

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

See Also

In this article