Kbd

Key combo

A shortcut hint: beside a menu item, in a tooltip, in the command palette (which renders these itself), in a "press ← / → to navigate" line. keys takes the combo as an array and joins it with +; a single key can go in the slot. The markup is the HTML spec's own — a <kbd> of <kbd>s — so assistive tech reads it as keys, and the uppercase is CSS only: "Ctrl" stays "Ctrl" when read aloud.

Show the symbol the user's platform shows: ⌘ on a Mac, Ctrl elsewhere. The component doesn't detect the platform; pass what fits (navigator.platform or your own setting).

Basic

⌘+KCtrl+Shift+PEscpress ← / → in the gallery

<script setup lang="ts">
import { BlessKbd } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessKbd :keys="['⌘', 'K']" />
    <BlessKbd :keys="['Ctrl', 'Shift', 'P']" />
    <BlessKbd>Esc</BlessKbd>
    <span>press <BlessKbd :keys="['←']" /> / <BlessKbd :keys="['→']" /> in the gallery</span>
  </div>
</template>

Usage

import { BlessKbd } from "blessing-ui";

API

Props

Name	Type	Default	Description
keys	string[]	—	keys joined with + ; slot wins if present

Slots

Name	Scope	Description
default	—