KbdShortcut

Basic usage

Basic usage — see the example below.

⌘K

tsx

import { KbdShortcut } from "~/components/ui/base/kbd-shortcut";

<KbdShortcut>⌘K</KbdShortcut>

Multiple keys

Multiple instances side by side for multi-key shortcuts.

CtrlShiftP

tsx

import { KbdShortcut } from "~/components/ui/base/kbd-shortcut";

<span class="flex items-center gap-1">
  <KbdShortcut>Ctrl</KbdShortcut>
  <KbdShortcut>Shift</KbdShortcut>
  <KbdShortcut>P</KbdShortcut>
</span>

Inline in text

Shortcuts placed directly into a sentence — readable alongside regular text.

Press ⌘S to save or Esc to cancel.

tsx

import { KbdShortcut } from "~/components/ui/base/kbd-shortcut";

<p class="text-body text-secondary-label">
  Press <KbdShortcut>⌘S</KbdShortcut> to save or{" "}
  <KbdShortcut>Esc</KbdShortcut> to cancel.
</p>

Metadata

Source: meta.generated.json (see npm run generate)

File base/kbd-shortcut/meta.generated.json not found or path not allowed.