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.

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.