Skip to content
On this page

ToggleButton

A button that can be toggled on and off.

You should always include some content to display on the button via the default slot.

The v-model value will be a boolean, it is true if the button is currently toggled ("on") and false otherwise (button is "off").

Demos

Configurable

NameValue
Props
disabled
quiet
Slots
default
View
Reading direction

Default

Toggle the ToggleButton to see the value change. Open up the console to see emitted events.

Toggle button value: false

Stateful

Example usage as a pause/play button, changing the icon and text when toggled.

Stateful (icon-only)

Example usage as an icon-only pause/play button, changing the icon when toggled.

Usage

Props

Prop nameDescriptionTypeDefault
modelValueWhether the button should be set to "on" (true) or "off" (false).

Provided by v-model binding in the parent component.
booleanfalse
disabledWhether the disabled attribute should be added to the button, which prevents it from being clicked.booleanfalse
quietWhether the toggle button should be "quiet", which renders more minimally.booleanfalse

Events

Event namePropertiesDescription
update:modelValuemodelValue boolean - The new model valueEmitted when modelValue changes (i.e. when the state is toggled)

Slots

NameDescriptionBindings
defaultButton content