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

    Variants​

    KeyboardShortcuts come in two emphasis levels: default and minimal.

    Examples of KeyboardShortcut components with different emphasis property values. Examples of KeyboardShortcut components with different emphasis property values.

    Default​

    • Use the default variant to ensure the keyboard shortcut you're describing stands out and is quickly identifiable next to other content.

    Minimal​

    • Use the minimal variant if the keyboard shortcut is extra information that shouldn't stand out, such as a KeyboardShortcut as a suffix of a Menu item.

    KeyboardShortcuts in a Tooltip​

    If you want to show a keyboard shortcut in a Tooltip, use the dedicated KeyboardShortcutTooltip component.

    Still have questions?
    Find answers in the Dynatrace Community