Alert
L'information contextuelle posée dans la page : un ton, une icône, un titre, un message, et au plus une façon de rebondir.
Utilisation
import { Alert } from "@monstera/ui"Succès
Votre dossier est complet.
Information
Le versement arrive sous deux jours ouvrés.
Avertissement
Une pièce justificative est illisible.
Erreur
Le paiement a été refusé par votre banque.
Neutre
Votre espace sera indisponible dimanche matin.
Accent
Une nouvelle offre vous attend.
Tons
Le ton pilote d'un coup le fond, l'icône et le texte. Warning et danger sont annoncés en role=alert, les autres tons en role=status : le lecteur d'écran les interrompt ou pas selon le ton choisi.
Avec un lien
Le lien se range sous le texte, aligné à gauche.
Avec un lien à chevron
Le chevron se demande, il n’est pas posé d’office.
Avec une action
Le bouton se range sous le texte, aligné à droite.
Lien ou action
Le lien se pose sous le texte à gauche, le bouton à droite. Les deux props sont exclusives : passer les deux ne montre que le bouton, qui est la sortie la plus forte. Le lien s'affiche nu par défaut ; hasChevronRight ajoute le chevron de fin, hasChevronLeft celui de tête.
Fermeture
onClose pose en fin de ligne une croix dans la couleur du ton, sur le banner seulement : la card n'en a pas. Masquer l'alerte revient à l'app, qui la retire de la page au clic.
API
Prop
Type
FilterChip
Le bouton qui ouvre un jeu de filtres et annonce combien sont posés.
Dialog
La modale de confirmation. Par défaut l'élément dialog natif, au-dessus de toute la page : voile, touche Échap, piège de focus et passage au premier plan viennent du navigateur. En mode contenu, elle reste dans son conteneur, comme l'écran d'un proto.