Components / Utilities

Kbd

A native keyboard-input hint for shortcuts and commands.

Preview

SearchCtrlKSaveCtrlSCloseEscCommand

Use cases

Shortcut help

Show a key combination next to the command it invokes.

Instructional text

Explain which key dismisses an overlay or confirms a choice.

Usage example

Vue

<div class="flex flex-wrap gap-4">
  <span>Search <Kbd>Ctrl</Kbd> <Kbd>K</Kbd></span>
  <span>Save <Kbd>Ctrl</Kbd> <Kbd>S</Kbd></span>
  <span>Close <Kbd>Esc</Kbd></span>
  <span>Command <Kbd aria-label="Command key"><template #icon><CommandIcon aria-hidden="true" /></template></Kbd></span>
</div>

More examples

Shortcut list

Show each key as a separate semantic keycap.

Shortcut list

<script setup lang="ts">
import Kbd from './components/ui/kbd/Kbd.vue'
</script>

<template>
  <p>Search: <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd></p>
</template>

Compact hint

Use the small size in a dense command menu.

Compact hint

<script setup lang="ts">
import Kbd from './components/ui/kbd/Kbd.vue'
</script>

<template>
  <span>Close menu <Kbd size="sm">Esc</Kbd></span>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Kbd
Name	Type	Default or requirement
`size`	sm \| md	md

Use the #icon slot for a decorative icon beside a key label. Give icon-only hints an accessible name. Kbd displays shortcuts; bind the actual keyboard behavior in your application.

Implementation notes

Kbd presents a shortcut; the application must implement the actual keyboard behavior.
Use platform-appropriate key names in instructions shown to users.

Accessibility and localization

For an icon-only key hint, provide an accessible name and hide the decorative icon.