Composant de feedback contextuel disponible en 4 variantes (info, success, warning, error). Contrôlé — le dismiss est géré par le parent via onDismiss. Supporte titre optionnel, icône, contenu riche et largeur complète.
Aperçu
4 variantes côte à côte
Mise à jour disponible pour votre application.
Enregistrement réussi. Vos données sont sauvegardées.
Espace disque faible — moins de 500 Mo disponibles.
Échec de la connexion. Vérifiez vos identifiants.
Avec titre
prop title — texte en gras au-dessus du message
Information
Une nouvelle version est disponible. Rechargez la page pour en profiter.
Opération réussie
Vos modifications ont bien été enregistrées.
Attention
Cette action est irréversible. Confirmez avant de continuer.
Erreur critique
La requête a échoué avec le code 500. Contactez le support.
Dismissible
dismissible + onDismiss — géré par useState dans le parent
Notification
Cliquez sur ✕ pour fermer cette alerte.
Sans icône
icon=false — retire l'icône de la variante
icon=true (défaut)
Avec icône — comportement par défaut.
icon=false
Sans icône — affichage épuré.
Full Width
fullWidth=true — s'étend sur toute la largeur du conteneur
Erreur de chargement
Impossible de récupérer les données. Vérifiez votre connexion et réessayez.
Contenu riche
children accepte du JSX — liens, strong, mise en forme
Conseil
Consultez la documentation pour en savoir plus sur cette fonctionnalité.
Attention : Cette opération supprimera définitivement toutes les données associées.
Props
Prop
Type
Défaut
Requis
Description
children
React.ReactNode
—
✓
Message principal affiché dans l'alerte.
variant
"info" | "success" | "warning" | "error"
"info"
—
Variante visuelle de l'alerte — détermine couleur et icône.
title
string
—
—
Titre optionnel affiché en gras au-dessus du message.
dismissible
boolean
false
—
Affiche un bouton ✕ pour fermer l'alerte.
onDismiss
() => void
—
—
Callback appelé quand l'utilisateur clique sur ✕. Requis si dismissible=true.
icon
boolean
true
—
Affiche l'icône correspondant à la variante.
fullWidth
boolean
false
—
Étire l'alerte sur toute la largeur disponible.
Utilisation
tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { Alert } from "@brickslab/ui-web";
// Variantes
<Alert variant="info">Mise à jour disponible.</Alert>
<Alert variant="success">Enregistrement réussi.</Alert>
<Alert variant="warning">Espace disque faible.</Alert>
<Alert variant="error">Échec de la connexion.</Alert>
// Avec titre
<Alert variant="success" title="Opération réussie">
Vos modifications ont été enregistrées.
</Alert>
// Dismissible (contrôlé)
const [show, setShow] = useState(true);
{show && (
<Alert variant="info" dismissible onDismiss={() => setShow(false)}>
Cliquez ✕ pour fermer.
</Alert>
)}
// Sans icône
<Alert variant="warning" icon={false}>
Alerte sans icône.
</Alert>
// Full width
<Alert variant="error" fullWidth>
Erreur critique sur toute la largeur.
</Alert>
// Contenu riche
<Alert variant="info" title="Conseil">
Consultez la <a href="/docs">documentation</a> pour en savoir plus.
</Alert>
