Vue ToggleButton is used to select a boolean value using a button. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import ToggleButton from 'primevue/togglebutton';
Getting Started
Two-way binding to a boolean property is defined using the standard v-model directive.
<ToggleButton v-model="checked" />
As model is two-way binding enabled, setting the bound value as true displays the state as checked.
export default {
data() {
return {
checked: true
}
}
}
Labels and Icons
Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.
<ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" />
Theming
ToggleButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue ToggleButton showcase for demos and documentation.