Kappa / Kbd

⌘Command⇧Shift⌥Option⌃ControlCtrl+B

<script setup>
import { Kbd, KbdGroup } from "@dicehub/kappa/components/kbd";
</script>

<template>
  <Kbd><span aria-hidden="true">⌘</span><span class="visually-hidden">Command</span></Kbd>
  <Kbd><span aria-hidden="true">⇧</span><span class="visually-hidden">Shift</span></Kbd>
  <Kbd><span aria-hidden="true">⌥</span><span class="visually-hidden">Option</span></Kbd>
  <Kbd><span aria-hidden="true">⌃</span><span class="visually-hidden">Control</span></Kbd>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>B</Kbd>
  </KbdGroup>
</template>

<style scoped>
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
</style>

Installation

Kbd is part of the main Kappa package. It uses native HTML and adds no state machine or runtime dependency beyond Vue.

Barrel

import { Kbd, KbdGroup } from "@dicehub/kappa";

Granular

import { Kbd, KbdGroup } from "@dicehub/kappa/components/kbd";

Usage

Use Kbd for text that represents user input. It renders the native kbdelement and forwards native attributes, data attributes, and consumer classes.

Enter

<script setup>
import { Kbd } from "@dicehub/kappa/components/kbd";
</script>

<template>
  <Kbd>Enter</Kbd>
</template>

Composition

Rendered structure

Kbd <kbd>

KbdGroup <span>
├── Kbd
├── visible separator (optional)
└── Kbd

Use Kbd for a key and KbdGroup for a key combination. Ark UI has no matching stateful primitive, so Kappa uses the nativeHTML element.

Examples

Group

Use KbdGroup to keep every key and visible separator together on one line.

Open search with Ctrl+K

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <span>+</span>
  <Kbd>K</Kbd>
</KbdGroup>

Button

Place Kbd inside a button when a keyboard shortcut activates the same action.

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Kbd } from "@dicehub/kappa/components/kbd";
</script>

<template>
  <Button variant="outline">
    Accept
    <Kbd>Enter</Kbd>
  </Button>
</template>

Pair a short action description with its shortcut. Keep the tooltip content concise.

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Kbd, KbdGroup } from "@dicehub/kappa/components/kbd";
import { Tooltip } from "@dicehub/kappa/components/tooltip";
</script>

<template>
  <Tooltip.Root>
    <Tooltip.Trigger as-child>
      <Button variant="outline">Save changes</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      Save changes
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>S</Kbd>
      </KbdGroup>
    </Tooltip.Content>
  </Tooltip.Root>
</template>

Inline Text

Kbd aligns with surrounding text without changing the meaning of the sentence.

Press Esc to close the panel, or use Ctrl+Enter to open the result in a new tab.

<p>
  Press <Kbd>Esc</Kbd> to close the panel, or use
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>Enter</Kbd>
  </KbdGroup>
  to open the result in a new tab.
</p>

Right to Left

Keep Latin shortcuts left to right inside text that uses a right-to-left language.

اضغط Ctrl+K لفتح البحث

<p dir="rtl" lang="ar">
  اضغط
  <KbdGroup dir="ltr">
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>K</Kbd>
  </KbdGroup>
  لفتح البحث
</p>

Accessibility

Use Kbd only for user input, not for generic code, status, or decorative text.
Write familiar key names such as Enter, Esc, and Ctrl.
Add visually hidden text when a symbol alone may not have a clear spoken name.
Keep visible separators such as + available to assistive technology.
Kbd is not interactive. Use Button when the user can activate an action by pointer.
Localize prose and key names when the target platform or language needs it.

API Reference

Kbd

Renders a native kbd. It has no component-specific props.

KbdGroup

Renders an inline span. It has no component-specific props.

Slots

Component	Slot	Description
`Kbd`	`default`	Visible key name or symbol.
`KbdGroup`	`default`	Keys and optional visible separators in one inline group.

Data Slots

Slot	Element	Description
`kbd`	`kbd`	Semantic keyboard-input keycap.
`kbd-group`	`span`	Inline shortcut grouping element.

Exports

Export	Description
`Kbd`	Semantic keyboard-input keycap.
`KbdGroup`	Inline group for keys and visible separators.
`KbdProps / KbdSlots`	Public Kbd prop and slot contracts.
`KbdGroupProps / KbdGroupSlots`	Public KbdGroup prop and slot contracts.