Kbd

Beta

A key or shortcut drawn as a keycap.

Press Enter or Space to select the focused tab.

---
import Kbd from "@/components/ui/kbd/Kbd.astro";
---

<p class="text-[15px] text-ghost">
  Press <Kbd>Enter</Kbd> or <Kbd>Space</Kbd> to select the focused tab.
</p>

Installation

npx eris-ui@latest add kbd

pnpm dlx eris-ui@latest add kbd

bunx eris-ui@latest add kbd

yarn dlx eris-ui@latest add kbd

Shortcuts

Wrap keys pressed together in KbdGroup. When a shortcut reaches the end of a line, its keys move to the next line together instead of splitting. They only wrap when the shortcut is wider than the space it has.

⌘CommandKShiftTab

---
import Kbd from "@/components/ui/kbd/Kbd.astro";
import KbdGroup from "@/components/ui/kbd/KbdGroup.astro";
---

<KbdGroup>
  <Kbd label="Command">⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd>Shift</Kbd>
  <Kbd>Tab</Kbd>
</KbdGroup>

Symbols

Screen readers read some symbols by their Unicode name or skip them, so ↵ can come out as “downwards arrow with corner leftwards”. Pass label with the key’s name and screen readers say that instead. The symbol still shows on screen.

⌥Option⇧Shift↵Enter↑Up arrow↓Down arrow

---
import Kbd from "@/components/ui/kbd/Kbd.astro";
---

<Kbd label="Option">⌥</Kbd>
<Kbd label="Shift">⇧</Kbd>
<Kbd label="Enter">↵</Kbd>
<Kbd label="Up arrow">↑</Kbd>
<Kbd label="Down arrow">↓</Kbd>

Sizes

md is the default and fits body text and tables. Use sm in tighter spots, such as menus and search hints.

Press Esc to close the dialog.

Esc to close

---
import Kbd from "@/components/ui/kbd/Kbd.astro";
---

<div class="flex flex-col items-center gap-5">
  <p class="text-[15px] text-ghost">Press <Kbd>Esc</Kbd> to close the dialog.</p>
  <p class="flex items-center gap-1.5 text-xs text-muted">
    <Kbd size="sm" class="text-muted">Esc</Kbd> to close
  </p>
</div>

Parts

Component	Renders
`Kbd`	One key. Props: `size`, `label`
`KbdGroup`	Keys pressed together, such as ⌘ K

Props

Prop	Type	Default
`size`	`"sm" \| "md"`	`"md"`
`label`	`string`	none; screen readers read the key

Other attributes on Kbd and KbdGroup go straight to the <kbd> element.