DEV Community

loading...
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.

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';
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

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.

Discussion (0)

pic
Editor guide