Shortcut

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

Type

Shortcut has two visual styles. The "outline" type renders with a border and background. The "plain" type renders without any visual container.

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

Sizes

Shortcut is available in two sizes: "sm" and "md". The default size is "md".

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

Interactive

Providing an onClick handler makes the shortcut interactive — it renders as a button with hover and focus states. Use ariaLabel to provide an accessible name when the shortcut is clickable.

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

Active

The active prop renders the shortcut in its pressed state. Only available on the "outline" type.

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

Hooks

Use the useShortcuts hook to bind keyboard shortcuts and drive the active prop based on whether a key combination is currently pressed. checkShortcutState returns true while the combo is held.

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

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

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