ToggleButton

ToggleButton is used to select a boolean value using a button.

Download #


npx volt-vue add ToggleButton

Import #


import ToggleButton from '@/volt/ToggleButton.vue';

Basic #

ToggleButton is used with the v-model property for two-way value binding.


<template>
    <div class="card flex justify-center">
        <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
    </div>
</template>

<script setup lang="ts">
import ToggleButton from '@/volt/ToggleButton.vue';
import { ref } from 'vue';

const checked = ref(false);
</script>

Customized #

Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.


<template>
    <div class="card flex justify-center">
        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />
    </div>
</template>

<script setup lang="ts">
import ToggleButton from '@/volt/ToggleButton.vue';
import { ref } from 'vue';

const checked = ref(false);
</script>

Sizes #

ToggleButton provides small and large sizes as alternatives to the base.


<template>
   <div class="card flex flex-col items-center gap-4">
        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
    </div>
</template>

<script setup lang="ts">
import ToggleButton from '@/volt/ToggleButton.vue';
import { ref } from 'vue';

const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(false);
</script>

Invalid #

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.


<template>
    <div class="card flex justify-center">
        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />
    </div>
</template>

<script setup lang="ts">
import ToggleButton from '@/volt/ToggleButton.vue';
import { ref } from 'vue';

const checked = ref(false);
</script>

Disabled #

When disabled is present, the element cannot be edited and focused.


<template>
    <div class="card flex justify-center">
        <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" aria-label="Confirmation" />
    </div>
</template>

<script setup lang="ts">
import ToggleButton from '@/volt/ToggleButton.vue';
import { ref } from 'vue';

const checked = ref(false);
</script>