Feedback
EmptyState
Componente per comunicare l'assenza di contenuti con icona, titolo, descrizione e azione opzionale. Disponibile in variante default (centrata) e compact (inline).
Import
import { EmptyState } from '@pzeta/vue-components'
// oppure tramite plugin:
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
title | string | — | Obbligatoria. Titolo principale dell'empty state |
description | string | — | Testo descrittivo contestuale |
icon | string | — | Classe CSS dell'icona (es. 'pi pi-search') |
ctaLabel | string | — | Testo del bottone CTA. Se assente, il bottone non viene renderizzato |
variant | 'default' | 'compact' | 'default' | Variante di layout |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
cta-click | — | Emesso al click sul bottone CTA |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto aggiuntivo custom (posizionato dopo il CTA nella variante default, dopo il titolo in compact) |
Varianti
default
Layout centrato verticalmente con icona grande (6xl), titolo e descrizione in colonna, bottone CTA ben distanziato. Ideale per pagine vuote o sezioni principali.
compact
Layout inline orizzontale con icona piccola (2xl). Nessun CTA. Ideale per righe di tabella, sidebar o sezioni secondarie.
Esempi
Variante default
Variante compact (inline)
Senza icona
Solo titolo (minimalista)
Con contenuto custom via slot
In tabella con dati vuoti
Accessibilità
- Il componente usa
role="status"earia-live="polite"per comunicare il cambiamento di stato agli screen reader. - Il bottone CTA è un
<button type="button">nativo con focus e ring accessibili. - L'icona ha
aria-hidden="true"poiché è decorativa.
TypeScript
import type { EmptyStateProps, EmptyStateEmits } from '@pzeta/vue-components'
import type { EmptyStateVariant } from '@pzeta/vue-components'
// EmptyStateVariant = 'default' | 'compact'