Kbd
Kbd stellt Tastaturkürzel dar und passt sich dem Betriebssystem an.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.
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
zu erzeugen.
Kombiniere mit …
SearchField
Wenn eine Suche durch einen Keyboard-Shortcut fokussiert werden kann, kann die Kbd Component mit dem SearchField kombiniert werden, um dem User das verfügbare Tastaturkürzel sichtbar zu machen.
ContextMenu
In ContextMenus 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.
Text
Wird die Kbd Component innerhalb eines Texts
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.
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 |
key | Key | - | |
children | ReactNode | - |