IKbd ​

A keyboard shortcut, drawn as one chip per key.

<IKbd keys="mod+k" />
<IKbd keys="mod+shift+p" />
<IKbd keys="escape" />
<IKbd :keys="['g', 'i']" />

Display only: it shows what to press and binds nothing.

The mod key ​

mod renders as ⌘ on Apple platforms and Ctrl everywhere else. It is the same vocabulary matchesHotkey reads, so one string can drive both what you bind and what you show:

// bound
if (matchesHotkey(event, 'mod+k'))
  open()

<!-- shown -->
<IKbd keys="mod+k" />

The platform is resolved after mount, so server-rendered markup shows Ctrl until the component hydrates.

Keys it knows ​

Modifiers: mod, meta, cmd, ctrl, shift, alt / option.

Named keys: enter, escape, backspace, delete, tab, space, capslock, pageup, pagedown, home, end, and the arrows as either up or arrowup.

Anything else prints as given, with a lone character capitalised.

<IKbd keys="enter" />
<IKbd keys="backspace" />
<IKbd keys="tab" />
<IKbd keys="arrowup" />
<IKbd keys="pagedown" />
<IKbd keys="F12" />

Joined ​

joined puts a + between the chips, for a combination that needs spelling out.

<IKbd keys="mod+shift+k" />
<IKbd keys="mod+shift+k" joined />

Sizes ​

<IKbd keys="mod+k" size="xs" />
<IKbd keys="mod+k" size="sm" />
<IKbd keys="mod+k" size="md" />

In context ​

ICommandPalette renders its items' shortcuts with this component, so palette rows and chips beside a button match.

<IButton variant="outline" size="sm">
  Search
  <IKbd keys="mod+k" size="xs" class="ms-1" />
</IButton>

<span>Press <IKbd keys="escape" size="xs" /> to close</span>

Props ​

Slots ​

Helpers ​

parseHotkey(keys, isApple) and useApplePlatform() are exported for building your own shortcut UI.

Accessibility ​

The chips are hidden from assistive technology and the group carries the spoken form instead: mod+shift+k announces as "Command Shift K" on a Mac and "Control Shift K" elsewhere. Override it with ariaLabel.

When the shortcut belongs to a specific control, put aria-keyshortcuts on that control as well.