# Toggleable Button

A toggleable Button lets users switch between selected and unselected states. To make a Button toggleable, set the [`togglable`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#togglable) prop to `true`. The prop defaults to `false`.

The [`selected`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops#selected) prop sets the selected state. To control it from component state, update the value in the `@click` handler:

```vue
<Button :togglable="true" :selected="selected" @click="selected = !selected">
    Toggle
</Button>
```

The following example demonstrates toggleable Buttons in different fill modes.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/button/toggleable/source.txt)

## Suggested Links

* [API Reference of the Button](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops)
* [Disabled Button](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/button/disabled-state)
* [Icon Options](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/button/icons)
* [Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/button/appearance)