Kbd

Ported

One key or shortcut, for example ⌘K or Esc, in a tooltip, help text or a footer of hints. It only shows the keys; the app handles them (and can name them on the control with aria-keyshortcuts). In a menu item, use DropdownMenuShortcut.

Search⌘K

import { Kbd, KbdGroup } from "@etched/monet/kbd";

export function Preview() {
  return (
    <div className="row">
      Search
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </div>
  );
}

Installation

import { Kbd, KbdGroup } from "@etched/monet/kbd";

Examples

Keys

One key, a symbol or a short combination. The UI font, never monospace.

EscShift↵↑/⌘K

import { Kbd } from "@etched/monet/kbd";

export function Keys() {
  return (
    <div className="row">
      <Kbd>Esc</Kbd>
      <Kbd>Shift</Kbd>
      <Kbd>↵</Kbd>
      <Kbd>↑</Kbd>
      <Kbd>/</Kbd>
      <Kbd>⌘K</Kbd>
    </div>
  );
}

Groups

Keys pressed together, or one after another with a word between them.

⌘ShiftPGthenI

import { Kbd, KbdGroup } from "@etched/monet/kbd";

export function Groups() {
  return (
    <div className="row" style={{ gap: "var(--et-space-6)" }}>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>G</Kbd>
        then
        <Kbd>I</Kbd>
      </KbdGroup>
    </div>
  );
}

Hints

A line of keyboard hints under a list, as in Orbit's candidate search.

↑↓Navigate↵Open resultEscClose

import { Kbd, KbdGroup } from "@etched/monet/kbd";

export function Hints() {
  return (
    <div className="row" style={{ color: "var(--et-text-subtle)", fontSize: "var(--et-text-body-sm)" }}>
      <KbdGroup>
        <Kbd>↑</Kbd>
        <Kbd>↓</Kbd>
      </KbdGroup>
      Navigate
      <Kbd>↵</Kbd>
      Open result
      <Kbd>Esc</Kbd>
      Close
    </div>
  );
}

In a tooltip

The tooltip shows the shortcut; aria-keyshortcuts gives it to screen readers on the button itself.

import { MagnifyingGlassIcon } from "@phosphor-icons/react";
import { Button } from "@etched/monet/button";
import { Tooltip } from "@etched/monet/tooltip";
import { Kbd } from "@etched/monet/kbd";

export function InATooltip() {
  return (
    <div className="row">
      <Tooltip
        content={
          <span className="row">
            Find candidate <Kbd>/</Kbd>
          </span>
        }
        render={<Button shape="square" aria-label="Find candidate" aria-keyshortcuts="/" icon={<MagnifyingGlassIcon />} />}
      />
    </div>
  );
}

Accessibility

A native kbd element with no ARIA role, so screen readers read its text as plain text. KbdGroup is a kbd around the keys.
It only shows keys and handles none. Handle the keys in the app, and name the shortcut on the control with aria-keyshortcuts.
In a menu item, use DropdownMenuShortcut in place of Kbd.