# Shortcut

Displays a keyboard shortcut hint, such as "⌘ K", as a decorative visual cue.

## Installation

```tsx
import { Shortcut } from "@makeplane/propel/components/shortcut";
```
## Usage

```tsx
import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function BasicDemo() {
  return <Shortcut keys="⌘ K" />;
}
```
## Examples

### Sizes

`size` sets the key-cap text: `sm` 11 px or `md` 12 px, which is the default. This is Shortcut's
own type scale, not the control ladder — a shortcut hint is a caption, not a control.

```tsx
import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Shortcut keys="⌘ K" size="sm" />
      <Shortcut keys="⌘ K" size="md" />
    </div>
  );
}
```

### Key combinations

The `keys` prop is free-form text, so any combination of symbols or key names renders as-is.

```tsx
import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function KeyCombinationsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Shortcut keys="⌘ K" />
      <Shortcut keys="⌘ ⇧ P" />
      <Shortcut keys="⌘ Enter" />
      <Shortcut keys="Esc" />
    </div>
  );
}
```

### In a button

```tsx
import { Button } from "@makeplane/propel/components/button";
import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function InAButtonDemo() {
  return (
    <Button
      label="Search"
      variant="secondary"
      size="sm"
      stretch="auto"
      icon={<Shortcut keys="⌘ K" size="sm" />}
      iconPosition="end"
    />
  );
}
```
## API Reference

### Shortcut

Public shortcut text slot. It is a visual hint by default; put the canonical `aria-keyshortcuts`
value on the actionable item or trigger.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` (required) | `string` | — | Keyboard shortcut text, e.g. `"⌘ K"`. |
| `size` | `"sm" \| "md"` | — |  |