Feedback

Chip

Elemento compatto per rappresentare tag, filtri attivi o selezioni. Supporta immagine, icona, label e rimozione interattiva.

Import

import { Chip } from '@pzeta/vue-components'
// oppure tramite plugin:
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`label`	`string`	`''`	Testo del chip
`image`	`string`	`''`	URL dell'immagine avatar
`imageAlt`	`string`	`'chip image'`	Alt text per l'immagine
`icon`	`string`	`''`	Classe CSS dell'icona (es. `'pi pi-tag'`)
`removable`	`boolean`	`false`	Mostra il pulsante di rimozione
`removeIcon`	`string`	`''`	Icona custom per il pulsante di rimozione
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Severity che determina il colore
`variant`	`'solid' \| 'soft' \| 'outline'`	`'soft'`	Variante visiva
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del chip
`indicator`	`boolean`	`false`	Mostra un indicatore di stato colorato a sinistra

Emits

Evento	Payload	Descrizione
`remove`	`MouseEvent \| KeyboardEvent`	Emesso al click o `Enter`/`Space` sul pulsante di rimozione

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto completamente custom (sostituisce label/icon/image)
`removeicon`	`{ removeCallback, keydownCallback }`	Icona di rimozione custom con accesso ai callback

Esempi

Con icona

Filtri rimovibili

Con indicator di stato

Icona di rimozione custom via slot

Accessibilità

Il pulsante di rimozione ha aria-label localizzato e supporta Enter/Space da tastiera.
Lo slot removeicon espone keydownCallback per mantenere la navigazione da tastiera su icone custom.

TypeScript

import type { ChipProps, ChipEmits, ChipSlots } from '@pzeta/vue-components'
import type { ChipVariant } from '@pzeta/vue-components'

// ChipVariant = 'solid' | 'soft' | 'outline'

Badge

Indicatore visivo compatto per notifiche, contatori e stati. Supporta severity, varianti, icone e dismissal.

EmptyState

Componente per comunicare l'assenza di contenuti con icona, titolo, descrizione e azione opzionale. Disponibile in variante default (centrata) e compact (inline).