Feedback

Tag

Etichetta colorata per categorizzare contenuti. Simile a Badge ma con padding maggiore e aspetto flat, ideale per label e stato.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`value`	`string \| number \| null`	—	Testo o numero da visualizzare nel tag
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast'`	`'primary'`	Severity che determina il colore (esclude `'help'`)
`rounded`	`boolean`	`false`	Bordi arrotondati (pill)
`icon`	`string \| null`	—	Classe CSS dell'icona (es. `'pi pi-check'`)
`class`	`string`	—	Classe CSS aggiuntiva per customizzazione

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto custom del tag (sostituisce `value`)
`icon`	—	Icona custom (sostituisce la prop `icon`)

Esempi

Con icona

Rounded (pill)

Contenuto custom via slot

In tabella (uso tipico)

Differenza con Badge

Caratteristica	Tag	Badge
Padding	Maggiore (`py-1.5 px-3`)	Compatto
Rounded default	`false`	`true`
Closable	No	Si
Varianti	No	`solid`, `outlined`, `subtle`, `dot`
Uso tipico	Etichette stato/categoria	Contatori, notifiche

Accessibilità

Il Tag è un elemento <span> semanticamente neutro.
Per stati critici, aggiungere role="status" al contenitore padre o usare aria-label sull'elemento.

TypeScript

import type { TagProps, TagSlots } from '@pzeta/vue-components'
import type { TagSeverity } from '@pzeta/vue-components'

// TagSeverity = Exclude<Severity, 'help'>
// = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'

Skeleton

Placeholder animato che simula la forma del contenuto durante il caricamento. Supporta shape rettangolare e circolare con animazioni wave, pulse e none.

Toast

Sistema di notifiche temporanee posizionate sullo schermo. Si usa tramite il composable useToast() per mostrare messaggi da qualsiasi componente.