Enregistrer avec une disquette
En tapant, un point signale les modifications ; avec la disquette ou Ctrl+S, le volet métallique glisse et le voyant clignote.
Réglages
Code
<div class="uvq15-fdd"><header><span class="fn">notas-reunion.txt</span><span class="ss"><i></i><b class="st">Enregistré</b></span></header><textarea rows="3" aria-label="Notes" spellcheck="false">Revoir le budget avec Laura et envoyer les plans avant jeudi.</textarea><footer><button type="button" class="dk"><span class="sh" aria-hidden="true"></span><span class="lb">Enregistrer</span></button><div class="dr"><span class="led" aria-hidden="true"></span><span class="hk"><kbd>Ctrl</kbd> + <kbd>S</kbd></span><time class="tm">12:00</time></div></footer><p class="sr" aria-live="polite"></p></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 Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Enregistrer est l'une des actions les plus répétées dans un éditeur, et ce bloc en fait un petit clin d'œil nostalgique. Le bouton est une disquette 3,5 pouces dessinée en CSS : à l'enregistrement, le volet métallique glisse, la disquette s'enfonce comme dans un lecteur et un voyant vert clignote. Il convient aux applis de notes, aux réglages et aux éditeurs de documents.
La saisie marque le fichier comme non enregistré avec un point orange, et Ctrl+S ou Cmd+S enregistre depuis n'importe où dans le bloc. La couleur principale règle le plastique, la secondaire le voyant, et l'heure indique la dernière sauvegarde.