Kbd
A visual representation of keyboard inputs, commands, or shortcuts in the UI.
⌥⌘K
Usage
import { Kbd } from "@lemonsqueezy/wedges";<Kbd keys={["option", "command"]}>K</Kbd>API Reference
| Prop | Value | Default |
|---|---|---|
keys | KbdKey | KbdKey[] | / |
size | Enum | "xs" |
Accessibility
Keys are labeled with the title attribute describing the key. For example, the option key is labeled with title="option".
KbdKeytype is defined like this:
type KbdKey =
| "command"
| "shift"
| "ctrl"
| "option"
| "enter"
| "delete"
| "escape"
| "tab"
| "capslock"
| "up"
| "right"
| "down"
| "left"
| "pageup"
| "pagedown"
| "home"
| "end"
| "help"
| "space";Examples
The following example shows different size props of the Kbd component.
⌥⌘W⌥⌘D⌥⌘G⌥⌘S