Alert

Un box di callout con role="alert" — un'icona, un titolo, una descrizione.

import { Alert, AlertTitle, AlertDescription } from "@pompeitech/vesuvius-ui";

Default

Heads up!

You can add components and dependencies to your app using the CLI.

Varianti

Order confirmed

Your order has been placed successfully.

Something went wrong

Your payment could not be processed.

Tutte le varianti

Oltre a default/destructive/success/warning, info e highlight coprono i due toni semantici rimanenti:

Maintenance scheduled

The API will be briefly unavailable Sunday at 2am UTC.

New: dark mode

Switch themes from the settings menu.

Aspetto "soft"

appearance="soft" sostituisce il colore della variante con contorno con uno sfondo tenue — un callout in stile dashboard invece di un banner di avviso. Ogni variante sopra lo supporta.

Usage approaching limit

85% of your monthly quota has been used.

L'icona non è obbligatoria — AlertTitle/AlertDescription si spostano a sinistra per riempire lo spazio quando non c'è un figlio <svg> (il layout è guidato da un selettore has-[>svg], non da una prop):

Session expired

API

Alert

Prop	Tipo	Default	Descrizione
`variant`	`"default" \| "destructive" \| "success" \| "warning" \| "info" \| "highlight"`	`"default"`	Tono semantico — colora l'icona e `AlertTitle`.
`appearance`	`"outline" \| "soft"`	`"outline"`	`"outline"`: una card con bordo su `bg-card`. `"soft"`: nessun bordo, sfondo tenue che corrisponde alla variante.

Più ogni prop nativa di <div> (role="alert" è già impostato).

AlertTitle / AlertDescription — ogni prop nativa di <div>; nessuna prop propria oltre agli aggancci di stile.

Accessibilità

La radice porta role="alert", quindi gli screen reader lo annunciano appena viene montato (una regione live ARIA, priorità assertiva) — riservalo a messaggi che l'utente ha davvero bisogno di veder interrompere il flusso. Per un messaggio che non ha bisogno di interrompere (una nota statica inline, non un cambio di stato live), considera invece un semplice <div> stilizzato e usa Alert specificamente quando il contenuto appare dinamicamente in risposta a qualcosa che l'utente ha appena fatto.