Delphi Design

Display keyboard keys and shortcuts in a consistent, accessible style.

Basic Usage

Single Key

Enter

Key Combination

Press

⌘K

to search

Modifier Keys

Command

⌘

Shift

⇧

Option/Alt

⌥

Control

⌃

Escape

Esc

Tab

Tab

Custom Separators

Use the separator prop to create menu paths or choice indicators.

Arrow Separator

File→Settings→Preferences

Slash Separator

Y/N

Common Shortcuts

Copy

⌘C

Paste

⌘V

Undo

⌘Z

Save

⌘S

Interactive Demo

Try typing on your keyboard to see the keys respond.

QWERTY Keyboard

Q

W

E

R

T

Y

U

I

O

P

A

S

D

F

G

H

J

K

L

Z

X

C

V

B

N

M

Space

Code Example

import { KeyboardKey } from "@delphi/ui";

// Single key
<KeyboardKey>Enter</KeyboardKey>

// Key combination
<div className="flex items-center gap-1">
  <KeyboardKey>⌘</KeyboardKey>
  <KeyboardKey>K</KeyboardKey>
</div>

// With separator for menu paths
<KeyboardKey separator={<span className="text-stone-9">→</span>}>
  <span>File</span>
  <span>Settings</span>
</KeyboardKey>

API Reference

Prop	Type	Default	Description
`children`	`ReactNode`	-	The key label or multiple children for separator mode
`separator`	`ReactNode`	-	Custom separator element between children
`className`	`string`	-	Additional CSS classes

Use standard platform symbols (⌘, ⇧, ⌥, ⌃) for modifier keys

Show keyboard shortcuts near their associated actions

Keep key labels concise — single characters or short words

Use semantic HTML with proper ARIA attributes for screen readers

Mix platform-specific shortcuts without indicating the platform

Use keyboard shortcuts as the only way to access functionality

Display shortcuts that don't actually work in your application

Overwhelm users with too many shortcuts at once