Toast pilule façon île
Une petite capsule noire s'étire pour afficher le message puis se referme, comme la Dynamic Island de l'iPhone.
Réglages
Code
<div class="uv-zi"><button class="fire">Confirmer</button><div class="toast"><i>✓</i><span><b>Réservation confirmée</b><small>Tout est prêt</small></span></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Notifications
Où l’utiliser
Elle convient aux produits pensés d'abord pour le mobile qui veulent un rendu natif. Dans une application de réservation de restaurants, dès qu'une table est confirmée, la capsule naît d'un point avec « Réservation confirmée » et se referme quelques secondes après. Si vous cherchiez une notification façon Dynamic Island en CSS, la voici.
Limitez le texte à un titre et une ligne courte, la capsule ne s'ouvre pas davantage. Elle rend le mieux en haut de l'écran sur téléphone ; en bas d'une page sur ordinateur, le clin d'œil à l'iPhone se perd.