Skip to main content

    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
    Still have questions?
    Find answers in the Dynatrace Community