This component displays a visual representation of a keyboard shortcut to the user.
Preview
Base
Keyboard shortcut outlines a key combination with a border to represent a keyboard shortcut. + will be rendered as an icon rather than text. Supported symbol tags can be used in the shortcut prop, see the Props, Slots & Events section.
Usage
- Commands shown should always be device specific (different systems may require a different shortcut combination).
- Commonly used in list item, tooltips.
- Don't use actual “+” key as a shortcut.
- Avoid using browser or operating system shortcuts. For example,
Control+Pisprint.
Variants
Inverted
Shortcut Size Variation
All Available Shortcut Aliases
Inline with Text and Screen Reader Text
Accessibility
Keyboard shortcuts are visible to sighted users and made available to assistive technology. This component automatically generates accessible text in a visually-hidden element that will be announced by screen readers.
The auto-generated accessible text converts:
- Icon aliases: (e.g.,
{cmd}) to full names (e.g., "Command") - Key abbreviations: (e.g., "Ctrl", "Alt") to full names (e.g., "Control", "Alt")
- Plus separators: (
+) to the word "plus"
For example, {cmd}+Ctrl+X will be announced as "Command plus Control plus X".
Customizing the Screen Reader Text
You can override the auto-generated accessible text by providing the screenReaderText prop with custom text.
Announcing shortcuts independent of DtKeyboardShortcut
If an element (e.g. a button) can be triggered by a keyboard shortcut, the aria-keyshortcuts attribute should be used to announce the keyboard shortcut to screen readers.
Example:
// This button can be activated by pressing control+shift+v, let's indicate that
// to the screenreader by using aria-keyshortcuts.
<button aria-keyshortcuts="control+shift+v">Press Me</button>
Abbreviations / symbols should be spelled out in full for voiceover / screen readers, e.g. "Control" instead of "Ctrl".