# Kbd

Kbd stellt Tastaturkürzel dar und passt sich dem Betriebssystem an.

```tsx
import { Kbd } from "@mittwald/flow-react-components";

<Kbd keys={["mod", "k"]} />
```

---

# Best Practices

- Zeige nur tatsächlich verfügbare und funktionierende Keyboard-Shortcuts an.
- Platziere den Kbd in direktem Bezug zu Inhalt oder Aktion des Shortcuts.

---

# Variants

Die Component wird in zwei Varianten angeboten:

- `plain` – für Shortcuts direkt an Bedienelementen; fügt sich dezent in die
  Oberfläche ein, ohne aufdringlich zu wirken.
- `soft` – für erklärende Texte oder Beschreibungen; hebt hervor, dass es sich
  um einen Keyboard-Shortcut handelt.

```tsx
import { Kbd } from "@mittwald/flow-react-components";

<>
  <Kbd variant="plain" keys={["mod", "k"]} />
  <Kbd variant="soft" keys={["mod", "k"]} />
</>
```

---

# Children

Um flexiblere Shortcuts darzustellen, unterstützt die Component auch `children`.
Hierbei ist darauf zu achten, dass Kbd-Components für die einzelnen Keys gesetzt
werden müssen, um semantisch korrekte
[kbd-HTML-Elemente](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd)
zu erzeugen.

```tsx
import { Kbd } from "@mittwald/flow-react-components";

<Kbd>
  <Kbd keys={["mod"]} /> + <Kbd keys={["k"]} />,{" "}
  <Kbd keys={["mod"]} /> + <Kbd keys={["c"]} />
</Kbd>
```

---

# Kombiniere mit …

## SearchField

Wenn eine Suche durch einen Keyboard-Shortcut fokussiert werden kann, kann die
Kbd Component mit dem [SearchField](/04-components/form-controls/search-field)
kombiniert werden, um dem User das verfügbare Tastaturkürzel sichtbar zu machen.

```tsx
import {
  SearchField,
  Kbd,
} from "@mittwald/flow-react-components";

<SearchField aria-label="Suche">
  <Kbd keys={["mod", "k"]} />
</SearchField>
```

## ContextMenu

In [ContextMenus](/04-components/actions/context-menu) werden häufig Aktionen
angezeigt, die zusätzlich per Keyboard-Shortcut ausgelöst werden können. In
diesem Fall kann Kbd mit dem jeweiligen MenuItem kombiniert werden.

```tsx
import {
  Button,
  ContextMenu,
  ContextMenuTrigger,
  MenuItem,
  Kbd,
} from "@mittwald/flow-react-components";

<ContextMenuTrigger>
  <Button>Menü öffnen</Button>
  <ContextMenu>
    <MenuItem>
      Speichern <Kbd keys={["mod", "s"]} />
    </MenuItem>
    <MenuItem>
      Kopieren <Kbd keys={["mod", "c"]} />
    </MenuItem>
    <MenuItem>
      Einfügen <Kbd keys={["mod", "v"]} />
    </MenuItem>
  </ContextMenu>
</ContextMenuTrigger>
```

## Text

Wird die Kbd Component innerhalb eines [Texts](/04-components/content/text)
verwendet, wird sie automatisch in der `soft` Variante dargestellt. Dadurch hebt
sie sich visuell vom Fließtext ab und macht deutlich, dass es sich um einen
Keyboard-Shortcut handelt.

```tsx
import { Text, Kbd } from "@mittwald/flow-react-components";

<Text>
  Verwende <Kbd keys={["mod", "k"]} /> um die Suche zu
  öffnen.
</Text>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | `string[]` | - | Array of keys to be joined |
| `isDisabled` | `boolean` | - | Whether the component is displayed as disabled |
| `variant` | `"plain" \| "soft"` | `"plain"` | The visual variant |
| `className` | `string` | - | The elements class name. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `children` | `ReactNode` | - | - |