KeyboardShortcut

Use the KeyboardShortcut to display one or more keys that represent a keyboard shortcut for a specific action.

OverviewPropertiesUsage

When to use

• To display keyboard shortcuts next to the actions they trigger, such as in menu items or tooltips.

When not to use

• When you need to show a keyboard shortcut inside a tooltip. Use KeyboardShortcutTooltip instead.

Variants

KeyboardShortcut components 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.