Vue3 ToggleButton

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.