Kbd

A keyboard key or shortcut, as text.

Keys

One key per Kbd; a one-character key is square.

⌘ ⇧ ⌥ ⌃ CtrlB Enter

Code

<Kbd attrs={{ title: "Command" }}>⌘</Kbd>
<Kbd attrs={{ title: "Shift" }}>⇧</Kbd>
<Kbd attrs={{ title: "Option" }}>⌥</Kbd>
<Kbd attrs={{ title: "Control" }}>⌃</Kbd>
<KbdGroup><Kbd>Ctrl</Kbd><Kbd>B</Kbd></KbdGroup>

Usage

import { Kbd, KbdGroup } from "@elements/ui/kbd";

Press <Kbd>Esc</Kbd> to close.
<KbdGroup><Kbd>Ctrl</Kbd>+<Kbd>B</Kbd></KbdGroup>
<KbdGroup keys={["⌘", "K"]} />
<KbdGroup keys={["Ctrl", "Shift", "P"]} separator="+" />

Examples

Group

Keys in running text, or rendered from keys with a separator.

Use Ctrl + BCtrl + K to open the command palette.

Use the shortcut to open the command palette.

Ctrl+Shift+P GthenI ⌘K

Code

<p>
  Use <KbdGroup><Kbd>Ctrl + B</Kbd><Kbd>Ctrl + K</Kbd></KbdGroup>
  to open the command palette.
</p>
<KbdGroup keys={["Ctrl", "Shift", "P"]} separator="+" />
<KbdGroup keys={["G", "I"]} separator="then" />

In a button

The cap is a translucent outline over the button's fill.

Code

<Button>Accept <Kbd>⏎</Kbd></Button>
<Button variant="primary">Save <KbdGroup keys={["⌘", "S"]} /></Button>

In a tooltip

Hover or focus a button. On the tooltip surface the cap takes the tooltip ink.

Code

<Tooltip>
  <Button slot="trigger">Save</Button>
  Save <KbdGroup keys={["Ctrl", "S"]} />
</Tooltip>

In a search field

A shortcut hint in an InputGroup inline-end addon.

⌘K

Code

<InputGroup>
  <Input type="search" placeholder="Search..." attrs={{ "aria-label": "Search" }} />
  <InputGroupAddon><Icon name="search" /></InputGroupAddon>
  <InputGroupAddon align="inline-end"><KbdGroup keys={["⌘", "K"]} /></InputGroupAddon>
</InputGroup>

Custom class

class is appended to the Kbd and KbdGroup root, after the template's own.

Esc CtrlShiftP

Code

<Kbd class="kbd-demo-custom">Esc</Kbd>
<KbdGroup class="kbd-demo-group" keys={["Ctrl", "Shift", "P"]} />

/* page.css */
.kbd-demo-custom { color: var(--accent-deep); }
.kbd-demo-group { gap: var(--space-1); }

RTL

Keys in right-to-left text; a group keeps its key order as written.

اضغط CtrlK لفتح لوحة الأوامر.

Code

<p dir="rtl">اضغط <KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup> لفتح لوحة الأوامر.</p>

Reference Kbd in the manual Every part, attribute, slot, key and data attribute.