Kbd

import { Kbd } from "@bosunkit/components/kbd";
import type { ReactElement } from "react";

export const description: string =
  "Keys as the crew press them: a single key, and a combination written the way it is read.";

export default function Keys(): ReactElement {
  return (
    <div style={{ display: "flex", gap: "var(--space-sm)", alignItems: "center" }}>
      <Kbd>Esc</Kbd>
      <Kbd>Tab</Kbd>
      <Kbd>Ctrl K</Kbd>
    </div>
  );
}

Kbd is a <kbd> element holding what is written on the keyboard: a single key, or a combination read left to right ("Ctrl K"). The element is what tells assistive technology the text is a key rather than prose, which is why it is a component at all rather than a styled <span>.

The look is the key chip the tooltip already draws for a shortcut — the mono face, the bright border, the small radius — so the two cannot drift apart. There is no keys prop to split a combination: what is written on a key is not a language's words, and the chip shows it exactly as the keyboard has it.

The command key

import { Kbd } from "@bosunkit/components/kbd";
import type { ReactElement } from "react";

export const description: string =
  "The command key as the platform writes it, detected from the browser — and each other platform's, when asked.";

export default function Command(): ReactElement {
  return (
    <div className="kbd-command-example" style={{ display: "flex", gap: "var(--space-sm)", alignItems: "center" }}>
      <Kbd command />
      <Kbd>K</Kbd>
      <Kbd command platform="apple" />
      <Kbd command platform="windows" />
      <Kbd command platform="linux" />
    </div>
  );
}

The command key wears a different mark on every platform, and the chip shows the one the crew press: command detects the platform from the browser — ⌘ on Apple, Win on Windows, Meta on Linux — and with children the chip is the chord: <Kbd command>R</Kbd> reads ⌘ R. Set platform to write the key for another platform, or pass the text yourself: a caller that names its own shortcuts does.

A shortcut label is documentation

Kbd displays a key or chord; it does not register a keyboard listener. Keep the displayed combination aligned with the actual command, its platform and its scope. Avoid activating a global shortcut while someone is typing into a field unless that behavior is intentional and documented.

Use visible text in help and accessible names so a symbolic Command key is understandable. Do not style a key chip as a clickable button unless it is inside a separately labeled control that performs an action.

Props