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.


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.


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:



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.


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


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

  • Solid (Default)
  • Outline

See Also

In this article