Feedback

Badge

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

Import

import { Badge } 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`	`null`	Valore da visualizzare nel badge
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Severity che determina il colore
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del badge
`variant`	`'solid' \| 'outlined' \| 'subtle' \| 'dot'`	`'solid'`	Variante visiva
`rounded`	`boolean`	`true`	Bordi arrotondati (pill)
`icon`	`string \| null`	`null`	Classe CSS dell'icona (es. `'pi pi-check'`)
`closable`	`boolean`	`false`	Mostra pulsante di chiusura
`closeIcon`	`string`	—	Icona del pulsante di chiusura (default dal config globale)
`max`	`number \| null`	`null`	Valore massimo: se `value > max` mostra `"max+"`

Emits

Evento	Payload	Descrizione
`close`	`Event`	Emesso quando l'utente clicca il pulsante di chiusura

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto custom del badge (sostituisce la prop `value`)

Esempi

Varianti visive

Con icona

Closable e limite massimo

Contenuto custom via slot

Accessibilità

Il pulsante di chiusura ha role="button" e aria-label localizzato automaticamente.
Supporta navigazione da tastiera: Enter e Space attivano la chiusura.
La variante dot non visualizza testo: aggiungere aria-hidden="true" al badge se puramente decorativo.

TypeScript

import type { BadgeProps, BadgeEmits } from '@pzeta/vue-components'
import type { BadgeSeverity, BadgeVariant } from '@pzeta/vue-components'

// BadgeSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast' | 'help'
// BadgeVariant  = 'solid' | 'outlined' | 'subtle' | 'dot'

AvatarGroup

Contenitore che raggruppa e sovrappone più Avatar con spacing configurabile. Ideale per mostrare membri di un team o partecipanti.

Chip

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