CommandButton

A button with a global keyboard shortcut, shown as keycaps that sink as you hold each key.

Preview

Props

Install

npx shadcn@latest add @evilbuttons/command-button

Usage

import { CommandButton } from "@/components/evil-buttons/command-button";

export function ButtonDemo() {
  return (
    <CommandButton
      shortcut="mod+s"
      onCommand={save}
      onClick={save}
    >
      Save
    </CommandButton>
  );
}

Variants

Three keys

Each part of the shortcut gets its own cap.

Named keys

enter, esc, space, and the arrow keys render as symbols or short names.

No keycaps

Hide the caps with showShortcut={false}.

Props

The component spreads native button props and forwards its ref to the button.

PropTypeDefaultDescription
shortcutstring"mod+s"Parts separated by +. Accepts mod, ctrl, alt, shift, named keys like enter or esc, and any single key.
onCommand() => void-Fired when the keyboard shortcut is pressed.
onClick(event) => void-Fired when the button is clicked. The keycaps press on click too.
preventDefaultbooleantrueStops the browser's own handling of the shortcut, like the save dialog on ⌘S.
showShortcutbooleantrueShow the shortcut as keycaps inside the button.
childrenReact.ReactNode"Save"The button label.
classNamestring-Extra classes passed to the button.
disabledboolean-Disables the button and its shortcut.

Good to know

  • mod means ⌘ on Mac and Ctrl everywhere else.
  • Holding the shortcut fires onCommand once, not on repeat.
  • Sets aria-keyshortcuts for screen readers.

Search docs

Jump to a button documentation page