# Shortcut button (goodtabs UI)

A button with a kbd hint that also fires when its key combination is pressed.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/shortcut-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/shortcut-button`

## Usage

```tsx
import { ShortcutButton } from "@/components/ui/shortcut-button"

<ShortcutButton shortcut="mod+k" onTrigger={() => setOpen(true)}>
  Search
</ShortcutButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| shortcut | `string` |  | The combination, like "mod+k", "s" or "shift+/". mod is Cmd on Mac, Ctrl elsewhere. |
| onTrigger | `() => void` |  | Fires on click and when the shortcut is pressed anywhere on the page. |
| variant | `Button variant` | `"outline"` | Any shadcn button variant. The kbd adapts on the solid default variant. |
| size | `Button size` | `"default"` | Any non-icon size; the hint needs room next to the label. |
| children | `ReactNode` |  | The label, optionally with an icon marked data-icon="inline-start". |

## When to use

- Opening a command menu, search or new item dialog that power users reach by keyboard
- Toolbar actions in an app view where the hint teaches the shortcut
- Anywhere a shortcut exists and should be discoverable without a help page

## When not to use

- For destructive actions; a global key press should never delete anything
- On marketing pages or forms where no one expects shortcuts
- For more than a handful of shortcuts on one screen; register them in one place instead

## Notes for agents

- onTrigger is a function, so a page that renders it must be a client component; the listener is on window and ignores inputs, textareas, selects and contenteditable
- mod reads navigator.platform after mount; the hint renders Ctrl until then and swaps to the Cmd symbol on a Mac
- Modifiers must match exactly, so mod+k does not fire on mod+shift+k; shift+/ matches by key code, so it works as ? on any layout
- The button sets aria-keyshortcuts and the hint is aria-hidden, so the accessible name is the label alone; disabled turns the listener off

Docs: https://ui.goodtabs.co/components/shortcut-button