# Kbd

Shows a key or a shortcut.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>⌥</Kbd>
  <Kbd>⌃</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <span>+</span>
  <Kbd>B</Kbd>
</KbdGroup>
```

## Installation

```bash
npx shadcn@latest add @constella/kbd
```

## Usage

```tsx
import { Kbd, KbdGroup } from "@/components/primitives/kbd";
```

```tsx
<Kbd>Ctrl</Kbd>
```

## Composition

```
KbdGroup
└── Kbd
```

## Group

Use `KbdGroup` to keep keys together.

```tsx
<p>
  Use{" "}
  <KbdGroup>
    <Kbd>Ctrl + B</Kbd>
    <Kbd>Ctrl + K</Kbd>
  </KbdGroup>{" "}
  to open the command palette
</p>
```

## Button

Put a `Kbd` inside a [Button](https://constella.aayush.cv/docs/components/button/index.md) with `data-icon="inline-end"`, so the button tightens its end around it.

```tsx
<Button size="sm" variant="outline">
  Accept <Kbd data-icon="inline-end">⏎</Kbd>
</Button>
```

## Tooltip

Inside a [Tooltip](https://constella.aayush.cv/docs/components/tooltip/index.md), the key inverts with the popup.

```tsx
<Tooltip>
  <TooltipTrigger render={<Button size="sm" variant="outline" />}>
    Print
  </TooltipTrigger>
  <TooltipContent>
    Print Document{" "}
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>P</Kbd>
    </KbdGroup>
  </TooltipContent>
</Tooltip>
```

## API Reference

`Kbd` and `KbdGroup` take every prop of `<kbd>`, plus `sx`, applied last. `Kbd` also takes `render`; see [Base UI useRender](https://base-ui.com/react/utils/use-render).