Clerri UI Toggle Button

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

Basic Usage

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

<template>
  <CToggleButton v-model="checked" class="w-24" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

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

Customized

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

<template>
  <CToggleButton 
      v-model="checked" 
      onLabel="Locked" 
      offLabel="Unlocked" 
      :onIcon="PrimeIcons.LOCK"
      :offIcon="PrimeIcons.LOCK_OPEN" 
      class="w-36" 
  />
</template>

<script setup lang="ts">
import { PrimeIcons } from '@primevue/core/api';
import { ref } from 'vue';

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

Sizes

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

<template>
    <div class="card flex flex-col items-center gap-4">
        <CToggleButton 
            v-model="checked1" 
            onLabel="On" 
            offLabel="Off" 
            size="small" 
            class="min-w-16" 
        />
        <CToggleButton 
            v-model="checked2" 
            onLabel="On" 
            offLabel="Off" 
            class="min-w-20" 
        />
        <CToggleButton 
            v-model="checked3" 
            onLabel="On" 
            offLabel="Off" 
            size="large" 
            class="min-w-24" 
        />
    </div>
</template>

<script setup lang="ts">
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>
  <CToggleButton 
      v-model="checked" 
      :invalid="!checked" 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

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

Disabled

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

<template>
  <CToggleButton 
      v-model="checked" 
      disabled
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

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