Buttons

Button

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

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`label`	`string \| null`	`null`	Testo visualizzato nel pulsante
`icon`	`string \| null`	`null`	Classe CSS dell'icona (es. `'pi pi-check'`)
`iconPos`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'left'`	Posizione dell'icona rispetto al testo
`loading`	`boolean`	`false`	Mostra spinner di caricamento e disabilita il pulsante
`loadingIcon`	`string`	`undefined`	Classe CSS dell'icona di caricamento personalizzata
`disabled`	`boolean`	`false`	Disabilita il pulsante impedendo interazioni
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Severità visiva che determina il colore del pulsante
`raised`	`boolean`	`false`	Aggiunge elevazione (ombra) al pulsante
`rounded`	`boolean`	`false`	Rende il pulsante completamente arrotondato
`text`	`boolean`	`false`	Stile solo testo senza sfondo
`outlined`	`boolean`	`false`	Stile con bordo e sfondo trasparente
`link`	`boolean`	`false`	Stile come link testuale (priorità massima sulle varianti)
`plain`	`boolean`	`false`	Rimuove la colorazione severity, mostrando colori neutri
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del pulsante
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Tipo nativo del button HTML
`autofocus`	`boolean`	`false`	Imposta il focus automatico al mount del componente
`badge`	`string \| number \| null`	`null`	Testo o numero da mostrare come badge sovrapposto
`badgeSeverity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Severità visiva del badge
`badgeClass`	`string \| null`	`null`	Classe CSS aggiuntiva per il badge
`fluid`	`boolean`	`false`	Il pulsante occupa tutta la larghezza disponibile
`value`	`string \| number`	`undefined`	Valore associato al pulsante (utile dentro un ButtonGroup)

Emits

Evento	Payload	Descrizione
`click`	`MouseEvent`	Emesso al click (non propagato se `disabled` o `loading`)
`focus`	`FocusEvent`	Emesso quando il pulsante riceve il focus
`blur`	`FocusEvent`	Emesso quando il pulsante perde il focus
`keydown`	`KeyboardEvent`	Emesso alla pressione di un tasto con focus sul pulsante

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto del pulsante (sostituisce `label`)
`icon`	—	Icona personalizzata nella posizione sinistra/top/bottom
`icon-right`	—	Icona personalizzata nella posizione destra
`loadingicon`	—	Icona di caricamento personalizzata

Esempi

Severity (varianti colore)

Varianti visive

Con icone

Dimensioni

Stati disabled e loading

Con badge

Full width (fluid)

Submit in un form

<script setup lang="ts">
const isSubmitting = ref(false)

async function onSubmit() {
  isSubmitting.value = true
  // ...
  isSubmitting.value = false
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <Button label="Invia" type="submit" severity="primary" :loading="isSubmitting" />
  </form>
</template>

Accessibilità

L'attributo disabled nativo viene applicato al <button> HTML, bloccando interazioni tastiera e mouse.
Quando loading è true, lo spinner ha role="status" con aria-label localizzato tramite @pzeta/vue-i18n.
Quando usato in ButtonGroup con la prop value, viene impostato automaticamente aria-pressed.
Per pulsanti solo icona (senza label), aggiungere sempre un aria-label tramite attributo nativo per la compatibilità con screen reader.
Il componente è nativamente navigabile da tastiera: Enter e Space attivano il click.

TypeScript

import type { ButtonProps, ButtonEmits } from '@pzeta/vue-components'
import type { Severity, Size, ButtonType, IconPos } from '@pzeta/vue-components'

MCP Setup per AI

Come configurare Claude Code e Cursor per interrogare la documentazione via server MCP.

ButtonGroup

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