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 |
|---|---|---|---|
children | ReactNode | - | |
className | string | - | The elements class name. |
isDisabled | boolean | - | Whether the component is displayed as disabled |
keys | string[] | - | Array of keys to be joined |
variant | "plain" | "soft" | "plain" | The visual variant |
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. |