Toggle

Botão de alternância com estado pressionado/não-pressionado.

Uso

<script setup lang="ts">
import { Toggle } from '@halfbyte/maka'
import { ref } from 'vue'

const negrito = ref(false)
</script>

<template>
  <Toggle v-model="negrito" aria-label="Negrito">
    <strong>B</strong>
  </Toggle>
</template>

Variantes

<Toggle variant="default">Default</Toggle>
<Toggle variant="outline">Outline</Toggle>

Tamanhos

<Toggle size="sm">Sm</Toggle>
<Toggle size="md">Md</Toggle>
<Toggle size="lg">Lg</Toggle>

Props

Prop	Tipo	Padrão
modelValue	boolean	false
variant	"default" | "outline"	"default"
size	"sm" | "md" | "lg"	"md"
disabled	boolean	false
ariaLabel	string	—

Slots

Slot	Descrição
default	Conteúdo do botão

Events

Evento	Payload	Descrição
update:modelValue	boolean	Emitido ao alternar o estado