Skip to content
On this page
You're viewing the docs for the beta version of Codex, which may contain features that have not been released yet. Codex users should visit the official docs.

ToggleButton

A button that can be toggled on and off.

Demos

Configurable

NameValue
Props
disabled
quiet
Slots
default
View
Reading direction

Default

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

ToggleButtons should always have a static label. This helps indicate to the user (including users of assistive technology) what it means for the button to be on or off. If you want a button with a label that changes when it is pressed, use the Button component instead.

Toggle button value: false

Icon only

When the ToggleButton includes only an icon and no text, add an aria-label to the ToggleButton to ensure the button is understandable to those using assistive technology.

Vue usage

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

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