---
title: Kbd
description: A keyboard key in a hint.
---

```tsx
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](/deft/components/input) `extra`.
- A key hint never replaces a visible control.

## API

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