Shortcut — Vortex Design System

⌘K

<Shortcut
  variant="outline"
  size="md"
  active={false}
>
  ⌘K
</Shortcut>

Features

Displays key combinations with a kbd element.
Supports outline and plain variants.
Supports sm and md sizes.
Can display an active state in the outline variant.
Supports clickable shortcuts with onClick in the outline variant.

Variants

Shortcut has two visual styles: outline draws keycaps with a border and background, and plain shows the keys as text.

⌘K⌘K

<Shortcut variant="outline">⌘K</Shortcut>
<Shortcut variant="plain">⌘K</Shortcut>

Sizes

Shortcut has two sizes: sm and md. The default is md.

⌘K⌘K⌘K⌘K

<Shortcut size="sm">⌘K</Shortcut>
<Shortcut size="md">⌘K</Shortcut>
<Shortcut size="sm" variant="plain">⌘K</Shortcut>
<Shortcut size="md" variant="plain">⌘K</Shortcut>

Interactive

Pass onClick to render the shortcut as a button. Give it an ariaLabel that names the action.

⌘K

<Shortcut onClick={() => {}} ariaLabel="Activate shortcut">⌘K</Shortcut>

Active

Set active to show the pressed state. It works with the outline variant only.

⌘K⌘K

<Shortcut active>⌘K</Shortcut>
<Shortcut>⌘K</Shortcut>

Key Bindings

Shortcut only displays keys. Bind them with useShortcuts, and set active from checkShortcutState to show the press while the keys are held.

⌘Kactive while ⌘K is held

import { useShortcuts } from "@vortexlabs/vortex";

const { checkShortcutState } = useShortcuts(
  {
    "Mod+k": () => {
      // handle shortcut
    },
  },
  [],
  { preventDefault: true },
);

<Shortcut active={checkShortcutState("Mod+k")}>⌘K</Shortcut>

Accessibility

Shortcut renders a semantic <kbd> element to convey keyboard shortcut meaning to assistive technologies.

Description

Renders as a semantic <kbd> element.

When onClick is provided, the component renders as a button. Use ariaLabel to provide an accessible name.

ariaLabel and onClick are not available on the "plain" variant.