Kbd

A component for displaying keyboard shortcuts and key combinations.

Import

<script setup lang="ts">
import { Kbd } from '@heroui-vue/vue'
</script>

Usage

Basic

⌘KorCtrlK

<template>
  <div class="flex gap-2 items-center">
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
    <span class="text-sm text-gray-500">or</span>
    <Kbd>Ctrl</Kbd>
    <Kbd>K</Kbd>
  </div>
</template>

<script setup>
import { Kbd } from '@heroui-vue/vue'
</script>

Key Combinations

<template>
  <p>
    <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy
  </p>
  <p>
    <Kbd>Cmd</Kbd> + <Kbd>V</Kbd> to paste
  </p>
  <p>
    <Kbd>Shift</Kbd> + <Kbd>Alt</Kbd> + <Kbd>F</Kbd> to format
  </p>
</template>

Sizes

<template>
  <Kbd>Esc</Kbd>
  <Kbd>Enter</Kbd>
  <Kbd>Space</Kbd>
</template>

Variants

<template>
  <Kbd>Ctrl</Kbd>
  <Kbd variant="light">Alt</Kbd>
</template>

Common Keys

<template>
  <div>
    <Kbd>⌘</Kbd> Command
    <Kbd>⌃</Kbd> Control
    <Kbd>⌥</Kbd> Option
    <Kbd>⇧</Kbd> Shift
    <Kbd>⏎</Kbd> Return
    <Kbd>⌫</Kbd> Delete
    <Kbd>⎋</Kbd> Escape
    <Kbd>⇥</Kbd> Tab
    <Kbd>⇪</Kbd> Caps Lock
  </div>
</template>

API

Kbd Props

Prop	Type	Default	Description
variant	'default' | 'light'	'default'	The kbd variant
keys	string[]	-	Array of key names to display

Kbd Slots

Slot	Description
default	The key content

Accessibility

• Kbd uses semantic <kbd> HTML element
• Properly styled to distinguish from regular text
• Screen reader friendly