# Command button (goodtabs UI)

A search-styled button that opens a command menu and listens for its shortcut.

## Install

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

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

## Usage

```tsx
import { CommandButton } from "@/components/ui/command-button"

<CommandButton placeholder="Search docs" shortcut="mod+k" onClick={() => setOpen(true)} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| placeholder | `string` | `"Search..."` | The text shown inside the field. Doubles as the accessible name. |
| shortcut | `string | null` | `"mod+k"` | Shortcut that fires onClick from anywhere. Shown as a kbd. null hides both. |
| onClick | `MouseEventHandler` |  | Opens your command menu. Also called by the shortcut. |
| width | `string` |  | Width of the field, any CSS length. Fills its container by default. |
| collapse | `"none" | "sm" | "md"` | `"none"` | Collapse to a square icon button below this breakpoint. |

## When to use

- As the trigger for a command palette or search dialog in a header or sidebar
- When the shortcut should work from anywhere on the page, not only while the field is focused
- Where a real input would be wrong because the search happens in a dialog

## When not to use

- For inline filtering as the person types: use the search input instead
- When there is no command menu to open; a plain search field is more honest
- More than one on a page: the shortcut listeners would compete

## Notes for agents

- It takes an onClick function, so the component that renders it must be a client component ("use client")
- mod means Command on macOS and Control elsewhere; the kbd shows the glyph after mount and the server renders the mac form
- The shortcut is ignored while focus is in an input, textarea, select or contenteditable
- Wire the actual command menu yourself: the button only opens it, pair it with shadcn's Command or a Dialog

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