Description
A new Kbd component will be introduced in Flow.
Both mStudio and internal applications will increasingly offer keyboard shortcuts for users who work with a keyboard. These shortcuts need to be displayed clearly and consistently in the frontend.
An inline component or a badge is not suitable for this purpose, as keyboard shortcuts require their own distinct visual meaning. For this reason, a dedicated shortcut component is being introduced.
Component Goals
- Consistent display of keyboard shortcuts across all applications
- Clear visual distinction from other UI elements
- Automatic adaptation to the user’s operating system
The component should automatically detect whether a user is on macOS or Windows and display the correct key symbols accordingly. This removes the need to implement OS-specific logic each time.
Use Cases
In combination with:
- SearchField
- Menu-Items, for example in a ContextMenu
Design
The component is visually inspired by a physical keyboard key. The goal is for users to immediately recognize that it represents a keyboard shortcut. We also introduced a plain version for a more subtle presentation.
This pattern is widely used in many common applications and is therefore intuitive.
In the current Figma design, the effect is achieved using an inner shadow to create a subtle sense of depth. The technical implementation may be adjusted if needed, as long as the overall visual appearance remains the same.
Design Tokens
--kbd-corner-radius: var(--size-corner-radius-s);
--kbd-padding: var(--size-xs);
--kbd-padding-y-start: var(--size-xxs);
--kbd-background-color: var(--neutral-soft-background-color-default);
--kbd-content-color: var(--neutral-soft-content-color);
--kbd-background-color-disabled: var(--disabled-soft-background-color);
--kbd-content-color-disabled: var(--disabled-soft-content-color);
--kbd-inner-shadow-color: var(--color-dark-color-200);
--kbd-inner-shadow-color-disabled: var(--disabled-soft-dark-background-color);
--kbd-content-color-plain: var(--form-control-placeholder-color);
--kbd-content-color-plain-disabled: var(--disabled-soft-content-color);
Styleguide
index:
Der Kbd ist eine dedizierte Komponente zur einheitlichen Darstellung von Tastaturkürzeln. Er stellt Tastaturkürzel visuelle dar und passt sich automatisch an das Betriebssystem des Users an.
Overview:
# Playground
Verwende `<Kbd />`, um eine Keyboardshortcut darzustellen.
Die Component erkennt automatisch, ob ein User macOS oder Windows verwendet, und zeigt die entsprechenden Tastenbezeichnungen korrekt an. Dadurch muss keine zusätzliche Logik implementiert werden.
[Example]
---
# Kombiniere mit …
## SearchField
Wenn eine Suche durch einen Keyboardshortcut fokussiert werden kann, kann der ShortcutKey mit dem [SearchField](Link) kombiniert werden, um dem User das verfügbare Tastaturkürzel sichtbar zu machen.
[Example]
## ContextMenu
In [ContextMenus](Link) werden häufig Aktionen angezeigt, die zusätzlich per Keyboardshortcut ausgelöst werden können. In diesem Fall kann die Kbd Component mit dem jeweiligen Menu-Item kombiniert werden.
[Example]
Guidelines:
# Grundlagen
## Best practices
Achte bei Verwendung eines Kbds darauf, dass ...
* nur tatsächlich verfügbare und funktionierende Keyboardshortcuts angezeigt werden.
* der ShortcutKey in direktem Bezug zu dem Inhalt oder der Aktion platziert wird, die durch den Shortcut ausgeführt werden kann.
---
## Verwendung
Verwende einen Kbd, um Keyboardshortcuts visuell klar und konsistent darzustellen.
Description
A new
Kbdcomponent will be introduced in Flow.Both mStudio and internal applications will increasingly offer keyboard shortcuts for users who work with a keyboard. These shortcuts need to be displayed clearly and consistently in the frontend.
An inline component or a badge is not suitable for this purpose, as keyboard shortcuts require their own distinct visual meaning. For this reason, a dedicated shortcut component is being introduced.
Component Goals
The component should automatically detect whether a user is on macOS or Windows and display the correct key symbols accordingly. This removes the need to implement OS-specific logic each time.
Use Cases
In combination with:
Design
The component is visually inspired by a physical keyboard key. The goal is for users to immediately recognize that it represents a keyboard shortcut. We also introduced a plain version for a more subtle presentation.
This pattern is widely used in many common applications and is therefore intuitive.
In the current Figma design, the effect is achieved using an inner shadow to create a subtle sense of depth. The technical implementation may be adjusted if needed, as long as the overall visual appearance remains the same.
Design Tokens
Styleguide
index:
Overview:
Guidelines: