Kbd

Kbd renders a keyboard shortcut. The reason it is three components rather than a styled <kbd> is the modifiers: ⌘ and ⇧ are symbols with no pronunciation, so each one is rendered as an <abbr> carrying the spelled-out name a screen reader can announce.

import { Kbd, KbdAbbr, KbdContent } from "ropav";

⌘K

variant

 unsetdefaultlight

<Kbd>
  <KbdAbbr key-value="command" />
  <KbdContent>K</KbdContent>
</Kbd>

KbdAbbr takes a key-value from a fixed set — command, shift, ctrl, option, alt, win, fn, enter, delete, escape, tab, capslock, space, help, up, right, down, left, pageup, pagedown, home, end — and looks up both the symbol and the name. KbdContent is for everything else: the letter, the digit, whatever the shortcut ends on.

Search

⌘K

Undo

⌘Z

Redo

⌘⇧Z

kbd-shortcuts.vue

<script setup lang="ts">
import { Kbd, KbdAbbr, KbdContent } from "ropav";

const shortcuts = [
  { action: "Search", keys: ["command"], letter: "K" },
  { action: "Undo", keys: ["command"], letter: "Z" },
  { action: "Redo", keys: ["command", "shift"], letter: "Z" },
] as const;
</script>

<template>
  <dl class="list">
    <div v-for="shortcut in shortcuts" :key="shortcut.action" class="row">
      <dt class="term">{{ shortcut.action }}</dt>
      <dd>
        <Kbd>
          <KbdAbbr v-for="key in shortcut.keys" :key="key" :key-value="key" />
          <KbdContent>{{ shortcut.letter }}</KbdContent>
        </Kbd>
      </dd>
    </div>
  </dl>
</template>

<style scoped>
.list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 2);
  font-size: var(--rp-text-sm);
  line-height: var(--rp-text-sm--line-height);
}

.row {
  display: flex;
  align-items: center;
  gap: calc(var(--rp-spacing) * 3);
}

.term {
  color: var(--rp-muted);
  width: calc(var(--rp-spacing) * 16);
}
</style>

Several KbdAbbrs in one Kbd make a chord, in the order they are written.

Accessibility

• The root is a real <kbd>, so a reader is told this is keyboard input rather than emphasis.
• Each modifier is an <abbr title="Command">⌘</abbr>. The symbol is shown, the name is what is announced and what a pointer reveals on hover.
• The glyphs are the Mac ones throughout, and nothing here is swapped per platform: win shows ⌘ and announces "Win", alt shows ⌥ and announces "Alt". Which key a shortcut uses on which platform is the application's to decide — it knows what it is describing and this component does not.

API

Kbd

Prop	Type	Default	Description
variant	"default" | "light"	—	Visual variant.

Slots: default.

KbdAbbr

Prop	Type	Default	Description
keyValue*	"alt" | "capslock" | "command" | "ctrl" | "delete" | "down" | "end" | "enter" | "escape" | "fn" | "help" | "home" | "left" | "option" | "pagedown" | "pageup" | "right" | "shift" | "space" | "tab" | "up" | "win"	—	The modifier to render, as its symbol plus a spelled-out title.

KbdContent

Slots: default.