Kbd | Snapshot UI

A key hint, such as the search shortcut, drawn as a small bone chip and safe in a server component.

Examples

Use one Kbd per key, so a shortcut has as many as it has keys. A key is as wide as its label, and tabular figures only keep a changing number steady. For a chord, HTML nests the keys in an outer kbd. A Kbd inside a Kbd draws as one chip, slightly taller than a lone key. A plain kbd inside it falls back to the browser's monospace face.

Example

Preview

Code

⌘ K to search↑ ↓ to move, ↵ to openesc to close

Follows the page theme and corners

import { Kbd } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function KbdKeys(): ReactElement {
  return (
    <div className="row" style={{ justifyContent: 'center', gap: 24 }}>
      <span>
        <Kbd>&#8984;</Kbd> <Kbd>K</Kbd> to search
      </span>
      <span>
        <Kbd>&#8593;</Kbd> <Kbd>&#8595;</Kbd> to move, <Kbd>&#8629;</Kbd> to open
      </span>
      <span>
        <Kbd>esc</Kbd> to close
      </span>
    </div>
  );
}

Usage

A static kbd element with no React Aria, so it works in a server component without 'use client'.

import { Kbd } from '@snapshot-ui/react';

export function SearchHint() {
  return (
    <p>
      Press <Kbd>&#8984;</Kbd> <Kbd>K</Kbd> to search.
    </p>
  );
}

Props

A Kbd accepts every attribute of an HTML element.

aria-hidden Booleanish	Indicates whether the element is exposed to an accessibility API.
children ReactNode	The key, such as `Esc`, `K` or a symbol. One key per element, so a shortcut is as many as it has keys.
className string	Added after the library's own class.

Accessibility

A Kbd is read aloud like any text. When something nearby already names the shortcut, such as a button whose label says it, pass aria-hidden so it is not announced twice.

Design rules

What keeps key hints in the system.

Show a key hint only for a shortcut that works.

Use the key symbol people see on their keyboard, such as the command key or Esc.

Never use a Kbd as a button. It is a label, not a control.