Keyboard shortcut

Storybook Source

Visual treatment for keyboard commands and key combinations.

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+P is print.

Variants

Inverted

In place of the inverted prop, use the v-dt-mode directive on the component element.

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".

References

Vue API 

import { DtKeyboardShortcut } from '@dialpad/dialtone-vue';

Props

Name
Default
Type
shortcut required
string

Include any of these tokens in your string to render the corresponding symbol: {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}

screenReaderText
null
string

Optional text to override the auto-generated accessible text for assistive technology. If not provided, accessible text will be automatically generated from the shortcut.

inverted Deprecated
 false
"true" | "false"

Use v-dt-mode instead. If true, applies inverted styles.

Keyboard shortcut documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope