DEV Community

Cover image for Vue3 ToggleButton

Vue3 ToggleButton

primetek profile image PrimeTek ・1 min read

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.


Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.


import ToggleButton from 'primevue/togglebutton';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Two-way binding to a boolean property is defined using the standard v-model directive.

<ToggleButton v-model="checked" />
Enter fullscreen mode Exit fullscreen mode

As model is two-way binding enabled, setting the bound value as true displays the state as checked.

export default {
    data() {
        return {
            checked: true
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode


ToggleButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.


Visit the PrimeVue ToggleButton showcase for demos and documentation.

Discussion (0)

Editor guide