Buttons

ButtonGroup

Contenitore per raggruppare pulsanti correlati in layout orizzontale o verticale, con supporto a selezione singola tramite v-model.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento del gruppo di pulsanti
`shadow`	`boolean`	`false`	Aggiunge ombra al gruppo
`fluid`	`boolean`	`false`	Il gruppo occupa tutta la larghezza disponibile
`class`	`string`	`''`	Classe CSS aggiuntiva per lo styling personalizzato
`modelValue`	`string \| number \| null`	`null`	Valore del pulsante selezionato (v-model)

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| number \| null`	Emesso quando cambia il pulsante selezionato

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto del gruppo, tipicamente una serie di componenti `Button`

Esempi

Gruppo azioni (senza selezione)

Con selezione tramite v-model

Assegnare la prop value a ciascun Button per abilitare la selezione. Il valore selezionato viene sincronizzato con v-model.

Solo icone con selezione

Orientamento verticale

Con dimensioni personalizzate

Accessibilità

Quando un Button figlio ha la prop value e si trova dentro un ButtonGroup, viene automaticamente impostato aria-pressed="true/false" per comunicare lo stato agli screen reader.
Usare aria-label sui pulsanti solo icona per garantire la comprensibilità.
La navigazione tra i pulsanti segue il normale ordine tabindex.

TypeScript

import type { ButtonGroupProps, ButtonGroupEmits } from '@pzeta/vue-components'

Button

Componente pulsante versatile con supporto a severity, varianti visive (solid, outlined, text, link), icone, badge e stato di caricamento.

SelectButton

Componente per selezione singola o multipla tramite un gruppo di pulsanti, compatibile con array di stringhe o oggetti tramite v-model.