Kbd

A keyboard key display component for showing keyboard shortcuts and key combinations with pixel-art styling. Arrow keys render as pixel icons, while modifier keys use Unicode symbols.

Name	Category	Description	Type	Default
`size`	Size	Size	`'large' \| 'default' \| 'small'`	`'default'`
`keys`	Content	Array of special key identifiers. Supports: command, shift, ctrl, alt, option, enter, delete, escape, tab, capslock, up, down, left, right, space, win, fn, home, end, pageup, pagedown	`KbdKey[]`	—
`default`	Slot	Keyboard key display content		—

Basic Usage

Display simple keyboard keys with text content.

<template>
  <div class="demo-kbd">
    <px-kbd>K</px-kbd>
    <px-kbd>F1</px-kbd>
    <px-kbd>Ctrl</px-kbd>
    <px-kbd>Enter</px-kbd>
    <px-kbd>Space</px-kbd>
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Special Keys

Use the keys prop to render special key symbols. Arrow keys automatically use pixel icons, while modifier keys use Unicode symbols.

<template>
  <div class="demo-kbd">
    <px-kbd :keys="['command']">K</px-kbd>
    <px-kbd :keys="['ctrl']">C</px-kbd>
    <px-kbd :keys="['shift']">A</px-kbd>
    <px-kbd :keys="['alt']">F4</px-kbd>
    <px-kbd :keys="['enter']" />
    <px-kbd :keys="['escape']" />
    <px-kbd :keys="['tab']" />
    <px-kbd :keys="['delete']" />
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Key Combinations

Combine keys prop with slot content to display keyboard shortcuts.

<template>
  <div class="demo-kbd">
    <div class="demo-kbd-row">
      <span>Copy:</span>
      <px-kbd :keys="['ctrl']">C</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Paste:</span>
      <px-kbd :keys="['ctrl']">V</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Undo:</span>
      <px-kbd :keys="['ctrl']">Z</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Save:</span>
      <px-kbd :keys="['command']">S</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Search:</span>
      <px-kbd :keys="['ctrl', 'shift']">P</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Screenshot:</span>
      <px-kbd :keys="['command', 'shift']">4</px-kbd>
    </div>
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-kbd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--px-font-family);
  font-size: 14px;
}
</style>

Sizes

Use size property to set the key size.

<template>
  <div class="demo-kbd">
    <div class="demo-kbd-row">
      <span>Small:</span>
      <px-kbd size="small" :keys="['ctrl']">C</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Default:</span>
      <px-kbd :keys="['ctrl']">C</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Large:</span>
      <px-kbd size="large" :keys="['ctrl']">C</px-kbd>
    </div>
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-kbd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--px-font-family);
  font-size: 14px;
}
</style>

All Keys Reference

A complete reference of all supported special key identifiers and their rendered symbols.

<template>
  <div class="demo-kbd">
    <div class="demo-kbd-section">
      <h4>Modifier Keys</h4>
      <div class="demo-kbd-grid">
        <div class="demo-kbd-item">
          <px-kbd :keys="['command']" />
          <span>command</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['shift']" />
          <span>shift</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['ctrl']" />
          <span>ctrl</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['alt']" />
          <span>alt</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['option']" />
          <span>option</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['win']" />
          <span>win</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['fn']" />
          <span>fn</span>
        </div>
      </div>
    </div>

    <div class="demo-kbd-section">
      <h4>Action Keys</h4>
      <div class="demo-kbd-grid">
        <div class="demo-kbd-item">
          <px-kbd :keys="['enter']" />
          <span>enter</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['delete']" />
          <span>delete</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['escape']" />
          <span>escape</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['tab']" />
          <span>tab</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['capslock']" />
          <span>capslock</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['space']" />
          <span>space</span>
        </div>
      </div>
    </div>

    <div class="demo-kbd-section">
      <h4>Arrow Keys</h4>
      <div class="demo-kbd-grid">
        <div class="demo-kbd-item">
          <px-kbd :keys="['up']" />
          <span>up</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['down']" />
          <span>down</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['left']" />
          <span>left</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['right']" />
          <span>right</span>
        </div>
      </div>
    </div>

    <div class="demo-kbd-section">
      <h4>Navigation Keys</h4>
      <div class="demo-kbd-grid">
        <div class="demo-kbd-item">
          <px-kbd :keys="['home']" />
          <span>home</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['end']" />
          <span>end</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['pageup']" />
          <span>pageup</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['pagedown']" />
          <span>pagedown</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.demo-kbd-section h4 {
  margin: 0 0 12px;
  font-family: var(--px-font-family);
  font-size: 14px;
}
.demo-kbd-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.demo-kbd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.demo-kbd-item span {
  font-family: var(--px-font-family);
  font-size: 10px;
  color: var(--px-text-color-secondary);
}
</style>

Kbd ​

Basic Usage ​

Special Keys ​

Key Combinations ​

Sizes ​

All Keys Reference ​

Kbd

Basic Usage

Special Keys

Key Combinations

Sizes

All Keys Reference