KBD

A small key cap that displays a key or keyboard shortcut, such as ⌘ K.

⌘

import { KbdKey, KbdShortcutGroup } from '@orvain/react';
 
<KbdKey>⌘</KbdKey>
<KbdKey arrow="up" aria-label="Up arrow" />
 
<KbdShortcutGroup
  items={[
    { keys: ['⌘', 'K'], label: 'Open command menu' },
    { keys: ['Esc'], label: 'Close' },
  ]}
/>

Add an Orvain KBD key showing “⌘”, no shadow.

Orvain MCPIncluded with the library

When to use#

Beside menu items and in tooltips, to show the shortcut for an action.
In help text and command menus.

Anatomy#

1Key cap

32px tall, 12px sides, 8px radius, white.

2Edge

Flat: a 1px #e1e1e1 stroke. Raised: a 0.8px ring and a four-step shadow.

3Label

Satoshi Medium 14 in #6d6d6d: ⌘, ⌘K and the like.

4Arrow

Optional 16px chevron before the label, or on its own.

States#

Shadow off

Flat, for dense text and menus.

Shadow on

Raised, for hero and marketing surfaces.

Arrow + label

An arrow and a key, such as ← ⌘K.

Group

Keys with a + between them and a label after, as in a command menu footer.

Source#

Preview – final code pending

The KBD is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

command menus context menus dropdowns