KeyboardHint

Displays one or more keyboard key badges

Modifier Combinations

Usage

import { KeyboardHint } from '@tryvienna/ui'

<KeyboardHint keys="Esc" />

Examples

Default

Default

<KeyboardHint keys="Esc" />

Single Key With Label

Single Key With Label

<KeyboardHint keys="Esc" label="to close" />

Multiple Keys

Multiple Keys

<KeyboardHint keys="['⌘" />

Multiple Keys With Label

Multiple Keys With Label

<KeyboardHint keys="['⌘" label="New document" />

Modifier Combinations

Modifier Combinations

<div className="flex flex-col gap-3">
  <KeyboardHint keys={['⌘', 'C']} label="Copy" />
  <KeyboardHint keys={['⌘', 'V']} label="Paste" />
  <KeyboardHint keys={['⌘', '⇧', 'P']} label="Command palette" />
  <KeyboardHint keys={['⌃', '⌥', 'Delete']} label="Delete word" />
  <KeyboardHint keys={['⌘', 'K']} />
</div>

Single Keys

Single Keys

<div className="flex items-center gap-4">
  <KeyboardHint keys="Enter" />
  <KeyboardHint keys="Tab" />
  <KeyboardHint keys="Esc" />
  <KeyboardHint keys="Space" />
</div>

API Reference

KeyboardHint

Prop	Type	Default	Description
keys	string | string[]	-
label	ReactNode	-

Data Attributes

Component	data-slot
KeyboardHint	"keyboard-hint"