Preview

Installation

npx sigma-ui@latest add kbd

Usage

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

<template>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>B</Kbd>
  </KbdGroup>
</template>

Group keys that belong to one shortcut with KbdGroup. Inside a tooltip, the key uses a lighter background so it stays readable on the inverted surface.

Examples

Shortcut

API Reference

Kbd

Slots

Slot	Scope
default Key label, such as Ctrl or an icon.	-

KbdGroup

Slots

Slot	Scope
default Kbd elements that form one shortcut.	-

Accessibility

Kbd renders a native <kbd> element, which assistive technologies announce as a keyboard input. The keys are not interactive.

Key	Description
Tab	Moves focus past the shortcut. The keys themselves are not focusable.