Design System
v5.6.2
⌘K

Shortcuts

Jump to Props·

Indicate a shortcut for the user

On this page

Installation

import { Shortcuts } from "@vitality-ds/components";

Usage

Use Shortcuts to support the user to understand any relevant keyboard or other device shortcuts to perform actions in an efficient way. Care should be taken when deciding on which keyboard shortcuts are used in your app.

<Stack>
  <Shortcuts keys={["⌘", "K"]} />
  <Shortcuts keys={["⌘", "⇧", "M"]} />
  <Shortcuts keys={["^", "L"]} />
</Stack>

Content Guidelines

  • When displaying letters, use uppercase characters to ensure clarity. This is not enforced by the component but is a recommended practice.
  • Pass one key per item in the keys array for optimal rendering and accessibility.
  • Avoid using the "plus" symbol (+) to separate keys; the component handles spacing and grouping automatically.

Examples

Within Buttons

When displayed within buttons, the shortcut keys are combined into a single visual element to save space and improve readability.

<Stack direction="horizontal">
  <Button shortcut={["cmd", "P"]}>Print</Button>
  <Button appearance="primary" shortcut={["cmd", "⏎"]}>
    Save
  </Button>
  <Button appearance="destructive" shortcut={["cmd", "X"]}>
    Delete
  </Button>
</Stack>

Within Tooltips

For keyboard-enabled actions like IconButtons, shortcuts can be displayed within tooltips to inform users of available keyboard alternatives.

<Stack direction="horizontal">
  <IconButton
    tooltipContent={
      <>
        Add a ToDo <Shortcuts variant="uiElementSolid" keys={["cmd", "K"]} />
      </>
    }
    icon={<ToDo />}
  />
  <IconButton
    tooltipContent={
      <>
        Add Medication <Shortcuts variant="uiElementSolid" keys={["A", "M"]} />
      </>
    }
    icon={<Medications />}
  />
</Stack>

Within Dropdown Menus

() => {
  const trigger = {
    type: "button",
    props: {
      children: "Add...",
      appearance: "primary",
    },
  };

  const items = [
    {
      label: "Attachment",
      icon: <Attachment />,
      shortcut: ["⌥", "A"],
      onClick: () => console.log("clicked"),
    },
    {
      label: "Consult Note",
      icon: <ConsultNote />,
      shortcut: ["⌘", "N"],
      onClick: () => console.log("clicked"),
    },
  ];
  return <DropdownMenu trigger={trigger} items={items} />;
};

Within Input Fields

Shortcuts can be used as adornments within input fields to indicate relevant keyboard shortcuts. Depending on the visual context, you may choose to use combineKeys to compact the shortcut display.

<DocsBox css={{ backgroundColor: "$neutral1", padding: "$lg" }}>
  <Stack align="stretch" spacing="lg">
    <TextInput
      adornEnd={{
        type: "shortcut",
        props: { keys: ["⌘", "F"] },
      }}
      placeholder="Find in page..."
      name="findInPage"
      value={null}
    />
    <FormField
      type="text"
      label="Work email address"
      id="email"
      value={null} // eg. this.state.text;
      inputProps={{
        adornEnd: {
          type: "shortcut",
          props: { keys: ["⌘", "K"], combineKeys: true },
        },
      }}
      onChange={(e) => console.log(e.target.value)}
    />
    <FormField
      type="text"
      label="Symptoms"
      inputProps={{ placeholder: "Example helper message" }}
      id="symptoms"
      value={null} // eg. this.state.text;
      onChange={(e) => console.log(e.target.value)}
      helperMessage={
        <>
          Press <Shortcuts keys={["⌘", "I"]} /> to insert references.
        </>
      }
    />
  </Stack>
</DocsBox>

Compacting shortcuts into one box

In cases where you may wish to display all keys in one box, use the combineKeys boolean prop. When used within buttons, this prop is automatically set to true.

<Stack>
  <Shortcuts combineKeys keys={["⌘", "K"]} />
  <Shortcuts combineKeys keys={["⌘", "⇧", "M"]} />
  <Shortcuts combineKeys keys={["^", "L"]} />
</Stack>

Variants

These variants are only available to allow design choices based on the visual context in which a shortcut is being presented. For instance, onSolidBackground variants are designed to be used when the shortcut is presented on a solid colour background such as a button with a primary appearance. As another example, displaying shortcuts on a Callout component would likely benefit from the onUiElementBackground variant to ensure sufficient contrast.

Example with Callout

<Callout
  severity="success"
  description={
    <>
      Your bank account details are stored with Medicare. Please press{" "}
      <Shortcuts
        color="success"
        variant="onUiElementBackground"
        keys={["CMD", "K"]}
      />{" "}
      to continue.
    </>
  }
/>

Variant Playground

The below demonstrates the various variants and colours available for this component.

<ShortcutsPlayground />

Cross-Platform Support

The Shortcuts component automatically detects the user's operating system and transforms modifier keys to their platform-appropriate representations.

How It Works

When you pass semantic key names like cmd, ctrl, shift, or alt, the component automatically converts them:

() => {
  const columns = [
    { colId: "inputKey", label: "Input Key" },
    { colId: "macOS", label: "macOS" },
    { colId: "windowsLinux", label: "Windows/Linux" },
  ];

  const rows = [
    { id: "1", inputKey: "cmd", macOS: "⌘", windowsLinux: "Ctrl" },
    { id: "2", inputKey: "ctrl", macOS: "⌃", windowsLinux: "Ctrl" },
    { id: "3", inputKey: "shift", macOS: "⇧", windowsLinux: "Shift" },
    { id: "4", inputKey: "alt", macOS: "⌥", windowsLinux: "Alt" },
    { id: "5", inputKey: "option", macOS: "⌥", windowsLinux: "Alt" },
    { id: "6", inputKey: "meta", macOS: "⌘", windowsLinux: "Win" },
    { id: "7", inputKey: "enter", macOS: "↩", windowsLinux: "Enter" },
    { id: "8", inputKey: "return", macOS: "↩", windowsLinux: "Enter" },
  ];

  return <Table columns={columns} tableData={rows} />;
};

Non-modifier keys (like letters, numbers, or function keys) are passed through unchanged.

Basic Example

Instead of hardcoding platform-specific symbols, use semantic key names:

<Stack spacing="md">
  <Typography variant="label">
    Using semantic key names (recommended):
  </Typography>
  <Shortcuts combineKeys keys={["cmd", "shift", "P"]} />

  <Typography variant="label">Common shortcuts:</Typography>
  <Stack direction="horizontal" spacing="md">
    <Shortcuts combineKeys keys={["cmd", "C"]} />
    <Shortcuts combineKeys keys={["cmd", "V"]} />
    <Shortcuts combineKeys keys={["cmd", "Z"]} />
  </Stack>
</Stack>

Supported Key Aliases

The component accepts multiple aliases for each modifier key, giving you flexibility in how you write your code:

<Stack spacing="md">
  <Typography variant="label">
    Command key aliases (all render the same):
  </Typography>
  <Stack direction="horizontal" spacing="sm">
    <Shortcuts combineKeys keys={["cmd", "K"]} />
    <Shortcuts combineKeys keys={["command", "K"]} />
    <Shortcuts combineKeys keys={["meta", "K"]} />
  </Stack>

  <Typography variant="label">Alt/Option aliases:</Typography>
  <Stack direction="horizontal" spacing="sm">
    <Shortcuts combineKeys keys={["alt", "S"]} />
    <Shortcuts combineKeys keys={["option", "S"]} />
    <Shortcuts combineKeys keys={["opt", "S"]} />
  </Stack>

  <Typography variant="label">Control aliases:</Typography>
  <Stack direction="horizontal" spacing="sm">
    <Shortcuts combineKeys keys={["ctrl", "L"]} />
    <Shortcuts combineKeys keys={["control", "L"]} />
  </Stack>
</Stack>

Figma Library

Figma.logo

Props

color

Type

"neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand"

Default Value

neutral

combineKeys

Type

boolean

keysRequired

Type

string[]

variant

Type

"link" | "uiElement" | "uiElementSolid" | "onSolidBackground" | "onUiElementBackground" | "onSurfaceBackground" | "ghost"

Default Value

uiElement

© 2026