Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn icon button whose tooltip teaches its keyboard shortcut and which registers that shortcut itself, so the hint can never describe a key that does nothing.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for the toolbar and header actions that have shortcuts: search, new item, save. Each hover teaches the shortcut once.
Do not use it for shortcuts that conflict with browser or screen reader keys, and do not register the same shortcut twice on a page.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Action name and accessible name. |
shortcut | string | - | Keys joined by +, e.g. "Ctrl+Shift+P". |
icon | ReactNode | - | Decorative icon. |
onClick | () => void | - | Runs on click and on the shortcut. |
aria-keyshortcuts exposes the combination so assistive technology can announce it.kbd element; the keys are text, not an image.| Key | Action |
|---|---|
| The shortcut (for example Ctrl+K or Cmd+K) | runs the action |
| Tab | focuses the button and shows the tooltip |
The pattern ships a Testing Library test (tooltip-shortcut-hint.test.tsx) that covers the name and keyshortcuts, the tooltip text, the real shortcut and the cleanup.