KeyboardShortcut
The KeyboardShortcut component visualizes one or multiple keys to communicate
keyboard shortcuts for certain actions. To specify a shortcut, provide the key
sequence in the
aria-keyshortcuts
format.
Import
import { KeyboardShortcut } from '@dynatrace/strato-components-preview/content';
Use cases
A shortcut consists of zero, one or more modifier keys, followed by a non-modifier key. The keys are joined by a plus sign and there are some rules on how to write the modifier keys. Aria-keyshortcuts also allows the user to define alternative key combinations separated with space, however this component only displays the first one.
Disable the component
The KeyboardShortcut component can also be displayed in a disabled state. By
setting the disabled attribute, the styling is adjusted accordingly and the
aria-disabled attribute is applied to indicate that the shortcut is currently
disabled.
Change the variant
Use the variant prop to define if the component should be rendered using the
default or minimal styling.
Change the color
Both variants come in two different color schemes, which can be set with the
color prop. The neutral option is suitable for most usecases with a light
background, while onaccent is best suitable for darker backgrounds.
Props
KeyboardShortcutProps
| Name | Type | Default | Description |
|---|---|---|---|
keys | - | The list of keys the component should display, specified in the aria-keyshortcuts format. | |
variant? | | | 'default' | The variant that should be used for styling the keys. |
color? | | | 'neutral' | The color scheme that should be used. |
disabled? | 'false' | Whether the component should be rendered in a disabled state. |