Kbd

A keyboard key in a hint.

import { Kbd } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function KbdBasic() {
  return (
    <Preview>
      <Kbd.Root>⌘</Kbd.Root>
      <Kbd.Root>K</Kbd.Root>
    </Preview>
  );
}

• One key per Kbd.Root; a shortcut such as ⌘K is two keys side by side.
• Keys use the small body text, so they fit in a line of text or in an Input extra.
• A key hint never replaces a visible control.

API

Parts: Root. Other props go to the native kbd.