CommandMenuKbd

The CommandMenuKbd component renders keyboard shortcut badges (like ⌘ K) in the command menu footer.

Usage

Copy<script setup lang="ts">
import { CommandMenuKbd } from '@/components/CommandMenuKbd'
</script>

<template>
  <CommandMenuKbd>⌘</CommandMenuKbd>
  <CommandMenuKbd>K</CommandMenuKbd>
</template>

Features

• Styled keyboard key appearance
• Supports icons (SVG) via slot
• Responsive sizing
• Accessible styling

API Reference

CommandMenuKbd

No props. Uses slot content for the key text or icon.

Styling

The component uses:

• Small font size (text-[0.7rem])
• Border and background styling
• Rounded corners
• Proper spacing
• Icon support with size constraints

Examples

Text Keys

Copy<template>
  <CommandMenuKbd>Ctrl</CommandMenuKbd>
  <CommandMenuKbd>C</CommandMenuKbd>
</template>

With Icons

Copy<template>
  <CommandMenuKbd>
    <CornerDownLeft />
  </CommandMenuKbd>
</template>