Alert

Panoramica

Il componente Alert fornisce un messaggio visivo per notificare l'utente di un'informazione, un errore, un avviso o un successo. Si basa sul componente Alert di MUI e lo estende per includere icone personalizzate tramite FontAwesome.

import { Alert } from "@itlogix/itlogix-ui";

Proprietà (Props)

Nome	Tipo	Obbligatorio	Default	Descrizione
children	ReactNode	sì	-	Contenuto testuale o JSX da mostrare all'interno dell'alert.
icon	IconDefinition	no	dinamico	Icona da visualizzare a sinistra. Se non specificata, viene scelta in base alla severity.
severity	'error'/'warning'/'info'/'success'	no	'info'	Tipo di messaggio da mostrare. Definisce anche i colori e l'icona.
variant	'standard'/'filled'/'outlined'	no	'filled'	Variante visiva dell'alert.
sx	SxProps<Theme>	no	undefined	Permette di personalizzare lo stile usando il sistema MUI.
action	ReactNode	no	undefined	Nodo React opzionale da mostrare a destra (es. pulsanti di azione).
onClose	() => void	no	undefined	Funzione chiamata quando viene chiuso l'alert.

Icone automatiche

Se icon non viene specificato, il componente sceglie automaticamente l'icona in base alla severity:

Severità	Icona default
success	faCircleCheck
info	faCircleInfo
warning	faTriangleExclamation
error	faCircleExclamation

Esempi di utilizzo

Alert base

<Alert severity="success">
  Operazione completata con successo!
</Alert>

Alert con azione

<Alert severity="warning" variant="outlined" action={<Button severity="warning" label="Chiudi" onClick={handleClose} />}>
  Attenzione: controlla i dati inseriti.
</Alert>

Alert con icona personalizzata

<Alert icon={faBell} severity="info">
  Hai una nuova notifica.
</Alert>

Alert con icona di chiusura

<Alert severity="error" onClose={() => console.log("chiuso") }>
  Errore nel salvataggio dei dati.
</Alert>

Comportamento

• L'alert supporta 3 varianti: standard, outlined e filled.
• L'icona cambia automaticamente in base alla severity, ma può essere sovrascritta.
• Supporta azioni customizzate e chiusura.

Note aggiuntive

• Il componente utilizza useTheme per ottenere i colori dal tema attivo.
• È possibile sovrascrivere lo stile tramite la prop sx.
• Si integra perfettamente nel sistema di componenti MUI.

---

Questo componente è utile per fornire feedback chiari e coerenti all'utente. Può essere usato in qualsiasi punto della UI dove è necessario mostrare un messaggio informativo, di errore, di successo o di avviso.