ZUI — Kbd

Kbd renders a single keyboard key. Wrap several in KbdGroup to show a shortcut such as ⌘K. Both render a <kbd> element — nesting keys inside a group <kbd> is valid HTML and conveys "composite input".

Usage

Esc

<kbd class="zui-kbd">Esc</kbd>

import { Kbd } from '@mrmartineau/zui/react'

<Kbd>Esc</Kbd>

---
import { Kbd } from '@mrmartineau/zui/astro'
---

<Kbd>Esc</Kbd>

import { Kbd } from '@mrmartineau/zui/solid'

<Kbd>Esc</Kbd>

<script lang="ts">
import { Kbd } from '@mrmartineau/zui/svelte'
</script>

<Kbd>Esc</Kbd>

<template>
<Kbd>Esc</Kbd>
</template>

<script setup>
import { Kbd } from '@mrmartineau/zui/vue'
</script>

Single keys

Use text labels or symbols (⌘, ⇧, ⌥, ⌃, ⏎, ⌫, ↑).

⌘⇧⌥⏎TabEscF

<kbd class="zui-kbd">⌘</kbd>
<kbd class="zui-kbd">⇧</kbd>
<kbd class="zui-kbd">⌥</kbd>
<kbd class="zui-kbd">⏎</kbd>
<kbd class="zui-kbd">Tab</kbd>
<kbd class="zui-kbd">Esc</kbd>
<kbd class="zui-kbd">F</kbd>

import { Kbd } from '@mrmartineau/zui/react'

<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⏎</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Esc</Kbd>
<Kbd>F</Kbd>

---
import { Kbd } from '@mrmartineau/zui/astro'
---

<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⏎</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Esc</Kbd>
<Kbd>F</Kbd>

import { Kbd } from '@mrmartineau/zui/solid'

<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⏎</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Esc</Kbd>
<Kbd>F</Kbd>

<script lang="ts">
import { Kbd } from '@mrmartineau/zui/svelte'
</script>

<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⏎</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Esc</Kbd>
<Kbd>F</Kbd>

<template>
<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⏎</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Esc</Kbd>
<Kbd>F</Kbd>
</template>

<script setup>
import { Kbd } from '@mrmartineau/zui/vue'
</script>

Shortcuts

Wrap keys in KbdGroup. Add a plain <span> between keys for a connector like + or then.

⌘K⌘+⇧+PGthenH

<kbd class="zui-kbd-group">
<kbd class="zui-kbd">⌘</kbd>
<kbd class="zui-kbd">K</kbd>
</kbd>

<kbd class="zui-kbd-group">
<kbd class="zui-kbd">⌘</kbd>
<span>+</span>
<kbd class="zui-kbd">⇧</kbd>
<span>+</span>
<kbd class="zui-kbd">P</kbd>
</kbd>

<kbd class="zui-kbd-group">
<kbd class="zui-kbd">G</kbd>
<span>then</span>
<kbd class="zui-kbd">H</kbd>
</kbd>

import { Kbd, KbdGroup } from '@mrmartineau/zui/react'

<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>

<KbdGroup>
<Kbd>⌘</Kbd>
<span>+</span>
<Kbd>⇧</Kbd>
<span>+</span>
<Kbd>P</Kbd>
</KbdGroup>

<KbdGroup>
<Kbd>G</Kbd>
<span>then</span>
<Kbd>H</Kbd>
</KbdGroup>

---
import { Kbd, KbdGroup } from '@mrmartineau/zui/astro'
---

<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>

<KbdGroup>
<Kbd>⌘</Kbd>
<span>+</span>
<Kbd>⇧</Kbd>
<span>+</span>
<Kbd>P</Kbd>
</KbdGroup>

<KbdGroup>
<Kbd>G</Kbd>
<span>then</span>
<Kbd>H</Kbd>
</KbdGroup>

import { Kbd, KbdGroup } from '@mrmartineau/zui/solid'

<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>

<KbdGroup>
<Kbd>⌘</Kbd>
<span>+</span>
<Kbd>⇧</Kbd>
<span>+</span>
<Kbd>P</Kbd>
</KbdGroup>

<KbdGroup>
<Kbd>G</Kbd>
<span>then</span>
<Kbd>H</Kbd>
</KbdGroup>

<script lang="ts">
import { Kbd, KbdGroup } from '@mrmartineau/zui/svelte'
</script>

<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>

<KbdGroup>
<Kbd>⌘</Kbd>
<span>+</span>
<Kbd>⇧</Kbd>
<span>+</span>
<Kbd>P</Kbd>
</KbdGroup>

<KbdGroup>
<Kbd>G</Kbd>
<span>then</span>
<Kbd>H</Kbd>
</KbdGroup>

<template>
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>⌘</Kbd>
  <span>+</span>
  <Kbd>⇧</Kbd>
  <span>+</span>
  <Kbd>P</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>G</Kbd>
  <span>then</span>
  <Kbd>H</Kbd>
</KbdGroup>
</template>

<script setup>
import { Kbd, KbdGroup } from '@mrmartineau/zui/vue'
</script>

In context

Keys scale to the surrounding font size, so they sit naturally inside text, buttons, and tooltips.

Press / to focus search, or ⌘K to open the command palette.

<p>Press <kbd class="zui-kbd">/</kbd> to focus search, or <kbd class="zui-kbd-group"><kbd class="zui-kbd">⌘</kbd><kbd class="zui-kbd">K</kbd></kbd> to open the command palette.</p>

<button class="zui-button zui-button-variant-outline">
Search
<kbd class="zui-kbd-group"><kbd class="zui-kbd">⌘</kbd><kbd class="zui-kbd">K</kbd></kbd>
</button>

import { Kbd, KbdGroup, Button } from '@mrmartineau/zui/react'

<p>
Press <Kbd>/</Kbd> to focus search, or{' '}
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open the command palette.
</p>

<Button variant="outline">
Search
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
</Button>

---
import { Kbd, KbdGroup, Button } from '@mrmartineau/zui/astro'
---

<p>
Press <Kbd>/</Kbd> to focus search, or
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open the command palette.
</p>

<Button variant="outline">
Search
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
</Button>

import { Kbd, KbdGroup, Button } from '@mrmartineau/zui/solid'

<p>
Press <Kbd>/</Kbd> to focus search, or{' '}
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open the command palette.
</p>

<Button variant="outline">
Search
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
</Button>

<script lang="ts">
import { Kbd, KbdGroup, Button } from '@mrmartineau/zui/svelte'
</script>

<p>
Press <Kbd>/</Kbd> to focus search, or
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open the command palette.
</p>

<Button variant="outline">
Search
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
</Button>

<template>
<p>
  Press <Kbd>/</Kbd> to focus search, or
  <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open the command palette.
</p>

<Button variant="outline">
  Search
  <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
</Button>
</template>

<script setup>
import { Kbd, KbdGroup, Button } from '@mrmartineau/zui/vue'
</script>

Shape

Use the shape prop to change the corners: default (rounded), hard (square), soft (pill) or squircle. A squircle is a rounded square with smooth corners. Browsers without corner-shape support show normal rounded corners.

Esc DefaultEsc HardEsc SoftEsc Squircle

<kbd class="zui-kbd">Esc</kbd>
<kbd class="zui-kbd zui-kbd-shape-hard">Esc</kbd>
<kbd class="zui-kbd zui-kbd-shape-soft">Esc</kbd>
<kbd class="zui-kbd zui-kbd-shape-squircle">Esc</kbd>

import { Kbd } from '@mrmartineau/zui/react'

<Kbd>Esc</Kbd>
<Kbd shape="hard">Esc</Kbd>
<Kbd shape="soft">Esc</Kbd>
<Kbd shape="squircle">Esc</Kbd>

---
import { Kbd } from '@mrmartineau/zui/astro'
---

<Kbd>Esc</Kbd>
<Kbd shape="hard">Esc</Kbd>
<Kbd shape="soft">Esc</Kbd>
<Kbd shape="squircle">Esc</Kbd>

import { Kbd } from '@mrmartineau/zui/solid'

<Kbd>Esc</Kbd>
<Kbd shape="hard">Esc</Kbd>
<Kbd shape="soft">Esc</Kbd>
<Kbd shape="squircle">Esc</Kbd>

<script lang="ts">
import { Kbd } from '@mrmartineau/zui/svelte'
</script>

<Kbd>Esc</Kbd>
<Kbd shape="hard">Esc</Kbd>
<Kbd shape="soft">Esc</Kbd>
<Kbd shape="squircle">Esc</Kbd>

<template>
<Kbd>Esc</Kbd>
<Kbd shape="hard">Esc</Kbd>
<Kbd shape="soft">Esc</Kbd>
<Kbd shape="squircle">Esc</Kbd>
</template>

<script setup>
import { Kbd } from '@mrmartineau/zui/vue'
</script>

To make squircle the default everywhere, add zui-squircle-all to <html> — see Squircle.

CSS custom properties

Set these on :root, on a wrapper, or on the element. See Component custom properties.

Property	Default	Description
`--zui-kbd-bg`	`var(--color-border)`	Key background
`--zui-kbd-color`	`var(--color-text)`	Key label colour
`--zui-kbd-radius`	`var(--radius-md)`	Border radius
`--zui-kbd-font-size`	`var(--step--2)`	Label font size
`--zui-kbd-font-family`	`var(--font-body)`	Label font family
`--zui-kbd-padding-inline`	`var(--space-3xs)`	Left and right padding