Keyboard shortcut tip toast
A tip with raised keycaps that press themselves; use the shortcut on your keyboard and they light up to confirm it.
Settings
Code
<div class="uvq09-kbd"><button type="button" class="fire">Show again</button><div class="tt" role="status"><small class="lb">Tip</small><b>Create a note instantly</b><button type="button" class="ks" aria-label="Try the Alt + N shortcut"><kbd class="k1"><small>⌥</small>Alt</kbd><i aria-hidden="true">+</i><kbd class="k2">N</kbd></button><small class="hn">Try it now on your keyboard</small><small class="dn">Note created</small></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
See all ToastsWhere to use it
Shortcut tips are easy to ignore when they are plain text. Here the keys are drawn as real keycaps with depth, a legend in the corner and a shadow that shrinks as they press down in a loop. The toast listens for the real Alt + N combination, and the keys also work as a button on touch screens. Use it for onboarding, productivity apps and power user hints.
The main color lights the keys when the shortcut works, the second tints the caps. Change the key check in the script and the legends together, and keep the listener on the document only while the tip is visible.