KeySymbol

Single keyboard key symbol display.

Also known as: key cap, keyboard key, key icon, shortcut key

View in Storybook

When to use

• Displaying a single keyboard key symbol. For full shortcuts with modifiers, use KeysBindings.

Import

import { KeySymbol } from '@vacano/ui'

Usage

<KeySymbol symbol="⌘" />

Common Symbols

// macOS
<KeySymbol symbol="⌘" />  {/* Command */}
<KeySymbol symbol="⌥" />  {/* Option */}
<KeySymbol symbol="⌃" />  {/* Control */}
<KeySymbol symbol="⇧" />  {/* Shift */}

// Navigation
<KeySymbol symbol="↑" />  {/* Up */}
<KeySymbol symbol="↓" />  {/* Down */}
<KeySymbol symbol="←" />  {/* Left */}
<KeySymbol symbol="→" />  {/* Right */}

// Actions
<KeySymbol symbol="⌫" />  {/* Backspace */}
<KeySymbol symbol="⌦" />  {/* Delete */}
<KeySymbol symbol="⇥" />  {/* Tab */}
<KeySymbol symbol="Esc" />
<KeySymbol symbol="Enter" />

Variants

<KeySymbol symbol="K" variant="dark" />
<KeySymbol symbol="K" variant="light" />

In Context

<span>
  Press <KeySymbol symbol="⌘" /> + <KeySymbol symbol="K" /> to open search
</span>

Props

Prop	Type	Default	Description
symbol	string	required	Key symbol to display
variant	'dark' | 'light'	'dark'	Color variant
className	string	-	CSS class name

Related

• KeysBindings - Full keyboard shortcut display