# ASP.NET MVC ToggleButton Overview

The Telerik UI ToggleButton HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ToggleButton widget.

The ToggleButton provides a styled clickable UI functionality with arbitrary content. Apart from consistent Kendo UI for jQuery styling, the ToggleButton enables you to indicate whether it is active or inactive, as well as group related options between various of ToggleButton components.

* [Demo page for the ToggleButton HtmlHelper](https://demos.telerik.com/aspnet-mvc/togglebutton/index)

## Initializing the ToggleButton

The following example demonstrates how to define the ToggleButton.

```Razor HtmlHelper
@(Html.Kendo().ToggleButton()
    .Name("toggleButton")
    .Tag("button")
    .Content("Text ToggleButton")
)
```

## Basic Configuration

* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the ToggleButton element. Moreover, the `id` is used to properly initialize the ToggleButton widget. You can also use the value of the `id` attribute to retrieve the client-side instance of the ToggleButton.
* The `Content()` configuration specifies the text that is rendered within the button. This option does not accept HTML, but only string values.
* The `Enable()` option determines whether the widget will be initially enabled (by default) of disabled.
* The `Group()` option specifies a group of ToggleButtons the current instance belongs to.
* The `Tag()` method allows the developer to determine whether the widget will be initialized from a `<button>` element (by default), or from an `<a>` element.

The following example demonstrates the available configuration options for the ToggleButton.

```Razor HtmlHelper
@(Html.Kendo().ToggleButton()
	.Name("toggleButton")
	.Content("Sample Button")
	.Enable(false)
    .Group("myGroup")
	.Tag("a")
)

<script type="text/javascript">
    $(function() {
        // The Name() of the ToggleButton is used to get its client-side instance.
        var togglebutton = $("#toggleButton").data("kendoToggleButton");
    });
</script>
```

## Functionality and Features

* [Appearance](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/appearance)—Use different configuration settings that control the styling of the component.
* [Icons](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/icons)—The variety of icons allows you to enhance the appearance of the ToggleButton.
* [Group](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/group)—You can group several ToggleButton instances.
* [Badges](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/badges)—Add a [Badge](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/layout/badge/overview) to the ToggleButton to conveniently show its status, a notification, or a short message.
* [Accessibility](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/accessibility/overview)—The ToggleButton is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/togglebutton/accessibility/keyboard-navigation) for faster navigation.

## Next Steps

* [Basic Usage of the ToggleButton HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/togglebutton/index)

## See Also

* [Using the API of the ToggleButton for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/togglebutton/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base)