Kbd

A keyboard key indicator. Kbd renders a single key; KbdGroup arranges several keys into a combo (like ⌘K). Use them to document shortcuts in menus, tooltips, help text, and command palettes.

Kbd is slot-only — put the key's label (a letter, word, or symbol like ⌘ or ⇧) inside it. There are no variants: a key is a small muted chip, and you can adjust anything via the class prop.

Usage

A single key holds whatever you put in its slot.

Single keysLetters, words, and symbols.

<script setup lang="ts">
import { Kbd } from "@dlbcodes/ui";
</script>

<template>
    <div class="flex items-center gap-3">
        <Kbd>⌘</Kbd>
        <Kbd>Esc</Kbd>
        <Kbd>Enter</Kbd>
        <Kbd>⇧</Kbd>
    </div>
</template>

Key combinations

Wrap multiple Kbds in a KbdGroup to show a shortcut combo. Pass aria-label on the group to give screen readers a clean spoken name — important when the keys are symbols (⌘, ⇧) that don't read clearly on their own.

CombinationsMulti-key shortcuts via KbdGroup.

<script setup lang="ts">
import { Kbd, KbdGroup } from "@dlbcodes/ui";
</script>

<template>
    <div class="flex items-center gap-6">
        <KbdGroup aria-label="Command K">
            <Kbd>⌘</Kbd>
            <Kbd>K</Kbd>
        </KbdGroup>

        <KbdGroup aria-label="Shift Command P">
            <Kbd>⇧</Kbd>
            <Kbd>⌘</Kbd>
            <Kbd>P</Kbd>
        </KbdGroup>
    </div>
</template>

In context

Both compose inline within text, so you can reference shortcuts naturally in help copy and tooltips.

InlineUsed within a sentence.

<script setup lang="ts">
import { Kbd, KbdGroup } from "@dlbcodes/ui";
</script>

<template>
    <p class="text-sm text-text-secondary">
        Press
        <KbdGroup aria-label="Command K">
            <Kbd>⌘</Kbd>
            <Kbd>K</Kbd>
        </KbdGroup>
        to open the command palette, or
        <Kbd>Esc</Kbd>
        to close it.
    </p>
</template>

Appearance

A key has a --muted background, --muted-foreground text, and corners that follow --radius, so it follows your theme, including dark mode. It is small (20px tall) and can't be selected or clicked, which keeps it from getting in the way of surrounding text.

Because --muted is close to the page background in the light theme, a key can look faint on a tinted panel. Add a border there through class:

vue

<Kbd class="border border-border">K</Kbd>

Props

Kbd

Prop	Type	Default	Description
class	string	—	Classes merged onto the element.

KbdGroup

Prop	Type	Default	Description
ariaLabel	string	—	Spoken name for the whole combo (e.g. "Command K"). When set, the group is announced as one label with role="group" instead of read key-by-key. Recommended when keys are symbols.
class	string	—	Classes merged onto the element.

Accessibility

• Kbd renders a semantic <kbd> element, the correct HTML for keyboard input.
• For symbol keys (⌘, ⇧, ⌥), set aria-label on the surrounding KbdGroup so screen readers announce the shortcut clearly rather than attempting to read the symbols individually. The group then exposes a single role="group" label.