Command Button

A button with its shortcut drawn as keycaps that sink as the real keys go down.

FreeWeb and MobileMotion

npx shadcn add @fetaui/command-button

Playground

Mac and Windows

Shortcut

Disabled

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/command-button

shortcutKey sets the letter. The shortcut works anywhere on the page and clicks the button.

Motion

Keycaps sink 2 px in 75 ms and return in 150 ms.
With reduced motion, the press scale is off and color changes stay. Keycaps stay put.

Each instance adds keydown, keyup and blur listeners to window. They are removed on unmount and while disabled.
State changes only when the modifier or letter goes down or up, so typing elsewhere does not re-render it.
Keycaps sink with a CSS transition.

Give your coding assistant the Markdown reference instead of screenshots.

Import from @/components/fetaui/command-button. Run your action in onClick: the shortcut clicks the button.
shortcutKey sets the letter, default k. The modifier is ⌘ on Mac and Ctrl elsewhere.
The listener is global and calls preventDefault, so use one button per shortcut on a page.
Leave os out in production. It is detected in an effect, so the first render shows Mac.
Demo clicks do nothing. Wire up onClick.