# Shortcuts Overlay

> The "?" overlay listing every keyboard shortcut, grouped by area.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ShortcutsOverlay/)

The "?" overlay listing every keyboard shortcut, grouped by area.

Props: `open`, `onClose`, `title`, `groups` ({title, items: [label, keys[]]}). Esc closes.

## Example

```tsx
import * as React from "react";
import { Button, ShortcutsOverlay } from "@twentyfirstmedia/pro";

function App() {
  const o = React.useState(true);
  return (
    <div
      style={{
        position: "relative",
        height: 460,
      }}
    >
      <Button
        onClick={() => {
          o[1](true);
        }}
      >
        Show shortcuts (?)
      </Button>
      <ShortcutsOverlay
        open={o[0]}
        onClose={() => {
          o[1](false);
        }}
        groups={[
          {
            title: "Global",
            items: [
              ["Search", ["⌘", "K"]],
              ["Shortcuts", ["?"]],
            ],
          },
          {
            title: "Navigation",
            items: [
              ["Go to chats", ["G", "C"]],
              ["Go to approvals", ["G", "A"]],
            ],
          },
          {
            title: "Approvals",
            items: [
              ["Run as shown", ["A"]],
              ["With a change", ["B"]],
              ["Discard", ["C"]],
              ["Other instruction", ["D"]],
              ["Next / previous", ["J", "K"]],
            ],
          },
        ]}
      />
    </div>
  );
}
export default App;
```

## Props

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### ShortcutsOverlay

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | Required |
| `onClose` | `() => void` | Required |
| `title?` | `string` |  |
| `groups` | `{ title: string; items: [string, string[]][] }[]` | Required |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |