ToggleButton

1<script setup lang="ts">2import { ToggleButton } from '@vitral/vue';3import { ref } from 'vue';4 5const bold = ref(false);6</script>7 8<template>9    <div style="display: grid; gap: 0.5rem; justify-items: start">10        <ToggleButton v-model="bold" on-label="Bold" off-label="Bold" />11        <small style="color: var(--vt-text-muted-color)">pressed: {{ bold }}</small>12    </div>13</template>

1<script setup lang="ts">2import { ToggleButton } from '@vitral/vue';3import { ref } from 'vue';4 5const starred = ref(true);6const locked = ref(false);7</script>8 9<template>10    <ToggleButton v-model="starred" on-label="Starred" off-label="Star" on-icon="star" off-icon="star" aria-label="Star" />11    <ToggleButton v-model="locked" on-label="On" off-label="Off" on-icon="check" off-icon="close" aria-label="Lock editing" />12</template>

1<script setup lang="ts">2import { ToggleButton } from '@vitral/vue';3</script>4 5<template>6    <ToggleButton :model-value="true" on-label="Small" off-label="Small" size="small" />7    <ToggleButton :model-value="false" on-label="Large" off-label="Large" size="large" />8    <ToggleButton :model-value="false" on-label="Invalid" off-label="Invalid" invalid />9    <ToggleButton :model-value="true" on-label="Disabled" off-label="Disabled" disabled />10</template>