Toast de atajo de teclado
Un consejo con teclas en relieve que se hunden solas; si pulsas el atajo en tu teclado, se iluminan y lo confirman.
Ajustes
Código
<div class="uvq09-kbd"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><small class="lb">Consejo</small><b>Crea una nota al instante</b><button type="button" class="ks" aria-label="Probar el atajo Alt + N"><kbd class="k1"><small>⌥</small>Alt</kbd><i aria-hidden="true">+</i><kbd class="k2">N</kbd></button><small class="hn">Pruébalo ahora en tu teclado</small><small class="dn">Nota creada</small></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Los consejos de atajos se pasan por alto cuando son texto plano. Aquí las teclas son teclas de verdad, con relieve, la leyenda en la esquina y una sombra que se encoge al hundirse en bucle. El toast escucha la combinación real Alt + N, y las teclas funcionan también como botón en pantallas táctiles. Úsalo en la bienvenida a una app, herramientas de productividad y pistas para usuarios avanzados.
El color principal ilumina las teclas cuando el atajo funciona y el secundario tiñe las teclas. Cambia a la vez la comprobación de la tecla en el script y las leyendas, y deja el listener en el documento solo mientras se vea el consejo.