Frappe UIFrappe UI

KeyboardShortcut ​

Renders a keyboard combo, e.g. Mod+K, as styled keys. Mod resolves to ⌘ on macOS and Ctrl elsewhere.

Playground ​

CtrlK
combo
bg
showPlus
useIcons
<KeyboardShortcut
  combo="Mod+K"
/>

Default ​

CtrlKCtrlShiftKCtrl
vue
<script setup>
import { KeyboardShortcut } from 'frappe-ui'
</script>

<template>
  <div class="flex items-center gap-6">
    <KeyboardShortcut combo="Mod+K" />
    <KeyboardShortcut combo="Mod+Shift+K" bg />
    <KeyboardShortcut combo="Mod+Backspace" :alt-combos="['Delete']" bg />
  </div>
</template>

Purely presentational — it doesn't register or fire the shortcut. Pair it with useShortcut for that.

API Reference ​

Show types
typescript
export interface KeyboardShortcutProps {
  /** Background chip style. */
  bg?: boolean
  /** Shortcut combo string, e.g. `"Mod+Shift+K"`. `Mod` resolves to Cmd on macOS, Ctrl elsewhere. */
  combo?: string
  /** Whether to visually show `+` separators between keys (non-`bg` mode only). */
  showPlus?: boolean
  /** Alternative equivalent combos, rendered after a `/` separator (display only). */
  altCombos?: string[]
  /** Render icons for certain non-modifier keys (arrows, enter, backspace). */
  useIcons?: boolean
}
bg
boolean

Background chip style.

combo
string

Shortcut combo string, e.g. `"Mod+Shift+K"`. `Mod` resolves to Cmd on macOS, Ctrl elsewhere.

showPlus
= true
boolean

Whether to visually show `+` separators between keys (non-`bg` mode only).

altCombos
= []
string[]

Alternative equivalent combos, rendered after a `/` separator (display only).

useIcons
= true
boolean

Render icons for certain non-modifier keys (arrows, enter, backspace).

default
—

Fallback content shown when no `combo` is given.

ItemListRowLoadingIndicator