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

Appearance

Updated on Feb 4, 2026

The ToggleButton provides predefined appearance options such as different sizes, border radiuses, fill modes, and theme colors.

For a complete example, refer to the Appearance Demo of the ToggleButton.

Options

The ToggleButton HtmlHelper provides the following methods for styling:

To control the size of the ToggleButton, configure the Size option with any of the following values:

When not explicitly set, the applied theme controls the default size.

The None value is deprecated. Use custom CSS instead.

Razor

@(Html.Kendo().ToggleButton()
    .Name("toggleButton")
    .Size(ComponentSize.Medium)
    .Content("Text ToggleButton")
)

The FillMode() method specifies how the color is applied to the component.

Razor

@(Html.Kendo().ToggleButton()
    .Name("toggleButton")
    .FillMode(ButtonFillMode.Solid)
    .Content("Text ToggleButton")
)

The following options are available for the FillMode configuration:

When not explicitly set, the applied theme controls the default fill mode.

The None value is deprecated. Use custom CSS instead.

The ThemeColor configuration provides a variety of colors that can be applied to the ToggleButton. The available options are:

When not explicitly set, the applied theme controls the default theme color.

Razor

@(Html.Kendo().ToggleButton()
    .Name("toggleButton")
    .ThemeColor(ThemeColor.Base)
    .Content("Text ToggleButton")
)

The border radius of the ToggleButton can be customized through the Rounded() method.

Razor

@(Html.Kendo().ToggleButtonButton()
    .Name("toggleButton")
    .Rounded(ButtonRounded.Medium)
    .Content("Text ToggleButton")
)

The following values are available for the Rounded option:

When not explicitly set, the applied theme controls the default border radius.

The None value is deprecated. Use custom CSS instead.