Kbd

A component for displaying keyboard shortcuts and key combinations.

Basic Usage

Installation

pnpm add @corew500/ui

Usage

import { Kbd, KbdGroup } from "@mordecai-design-system/ui"

<Kbd>⌘</Kbd>
<Kbd>K</Kbd>

Examples

Key Combinations

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>

With Labels

<div className="flex items-center gap-2">
  <span>Save:</span>
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>S</Kbd>
  </KbdGroup>
</div>

In Tooltips

The Kbd component automatically adjusts its styling when used inside tooltips:

<Tooltip>
  <TooltipTrigger>Save</TooltipTrigger>
  <TooltipContent>
    Save file <Kbd>⌘S</Kbd>
  </TooltipContent>
</Tooltip>

Sub-components

| Component | Description | |-----------|-------------| | Kbd | Single key display | | KbdGroup | Container for multiple keys |

Props

Kbd

Standard kbd element props.

KbdGroup

Standard div element props with flex layout.