# Appearance

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](https://demos.telerik.com/aspnet-mvc/togglebutton/appearance).

## Options

The ToggleButton HtmlHelper provides the following methods for styling:

* [`Size()`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/appearance#size)—configures the overall size of the component.
* [`ThemeColor()`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/appearance#themecolor)—configures what color will be applied to the component.
* [`FillMode()`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/appearance#fillmode)—defines how the color is applied to the ToggleButton.
* [`Rounded()`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/appearance#rounded)—determines the border radius of the component.

### Size

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

* `Small`
* `Medium`
* `Large`

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

> The `None` value is deprecated. Use custom CSS instead.

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

### FillMode

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

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

The following options are available for the `FillMode` configuration:

* `Solid`
* `Outline`
* `Flat`
* `Link`

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

> The `None` value is deprecated. Use custom CSS instead.

### ThemeColor

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

* `Base`
* `Primary`
* `Secondary`
* `Tertiary`
* `Info`
* `Success`
* `Warning`
* `Error`
* `Inverse`

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

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

### Rounded

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

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

The following values are available for the `Rounded` option:

* `Small`
* `Medium`
* `Large`
* `Full`

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

> The `None` value is deprecated. Use custom CSS instead.

## See Also

* [Appearance of the ToggleButton HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/togglebutton/appearance)
* [ToggleButton Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/togglebutton)
* [ToggleButton Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/togglebutton)