# Command Button

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

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/command-button
```

## Usage

```tsx
import { CommandButton } from '@/components/fetaui/command-button'
import { SearchIcon } from '@fetaui/react/rounded/search'

export function Example() {
  return <CommandButton label="Search" icon={<SearchIcon />} onClick={openSearch} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | string | Search |
| icon | ReactNode |  |
| shortcutKey | string | k |
| os | mac, windows | detected |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For a global action with a keyboard shortcut, like search.

## When not to use

- For actions with no shortcut: use Button.

## Accessibility

- A native button with aria-keyshortcuts.
- The keycaps are hidden from screen readers.

## 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.