Buttons

ToggleButton

Pulsante con stato on/off che mostra label e icone differenti in base allo stato attivo, con v-model booleano o mappato su valori di dominio (string/number) tramite onValue/offValue.

Import

import { ToggleButton } from '@pzeta/vue-components'
// oppure con plugin selettivo:
import { ButtonsPlugin } from '@pzeta/vue-components'
app.use(ButtonsPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`ToggleButtonValue` (`boolean \| string \| number`)	`false`	Stato del pulsante (v-model). Confrontato con `onValue`/`offValue`
`onValue`	`ToggleButtonValue`	`true`	Valore emesso quando il pulsante è attivo (on)
`offValue`	`ToggleButtonValue`	`false`	Valore emesso quando il pulsante è inattivo (off)
`onLabel`	`string`	label localizzata di default	Label mostrata quando il pulsante è attivo. Passa una stringa vuota per un toggle solo-icona
`offLabel`	`string`	label localizzata di default	Label mostrata quando il pulsante è inattivo. Passa una stringa vuota per un toggle solo-icona
`onIcon`	`string`	`undefined`	Classe CSS dell'icona mostrata quando attivo
`offIcon`	`string`	`undefined`	Classe CSS dell'icona mostrata quando inattivo
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Severità visiva applicata allo stato attivo
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del pulsante
`disabled`	`boolean`	`false`	Disabilita il pulsante impedendo il toggle
`invalid`	`boolean`	`false`	Indica uno stato di validazione non valido
`autofocus`	`boolean`	`false`	Focus automatico al mount
`tabindex`	`number \| string`	`0`	Ordine di tabulazione per navigazione tastiera
`ariaLabel`	`string`	`undefined`	Label per screen reader
`ariaLabelledby`	`string`	`undefined`	ID dell'elemento che fornisce il label
`class`	`string`	`''`	Classe CSS aggiuntiva per styling personalizzato

Emits

Evento	Payload	Descrizione
`update:modelValue`	`ToggleButtonValue`	Emesso quando il valore cambia (per v-model)
`change`	`{ originalEvent: Event; value: ToggleButtonValue }`	Emesso al cambio di stato con evento originale
`focus`	`FocusEvent`	Emesso quando il pulsante riceve il focus
`blur`	`FocusEvent`	Emesso quando il pulsante perde il focus

Slot

Slot	Scope	Descrizione
`default`	`{ checked: boolean }`	Contenuto personalizzato in base allo stato
`icon`	`{ checked: boolean }`	Icona personalizzata in base allo stato

Esempi

Con label e icone dinamiche

Solo icone (senza label)

Severity

Dimensioni

Valori on/off personalizzati

Con onValue/offValue il v-model può mappare valori di dominio (es. 'S'/'N', 1/0) invece del booleano standard.

Stato disabilitato

Con slot personalizzato

Accessibilità

Il componente usa un elemento <button> nativo con aria-pressed impostato automaticamente in base a modelValue.
ariaLabel e ariaLabelledby permettono di fornire un contesto descrittivo per screen reader.
Il tabindex configurabile permette di controllare l'ordine di navigazione.
Per pulsanti solo icona (passando onLabel/offLabel come stringa vuota), impostare sempre ariaLabel.

TypeScript

import type { ToggleButtonProps, ToggleButtonEmits, ToggleButtonValue } from '@pzeta/vue-components'

SplitButton

Pulsante combinato con azione principale cliccabile e menu dropdown per azioni secondarie, composto internamente da Button e Menu.

Buttons

Componenti pulsante per azioni e interazioni UI — Button, ButtonGroup, SplitButton, ToggleButton, SelectButton, SpeedDial.