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.

OverviewPropertiesUsage

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.

CodeSandbox

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.

CodeSandbox

Change the variant

Use the variant prop to define if the component should be rendered using the default or minimal styling.

CodeSandbox

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.

CodeSandbox