# Kbd

Shows a key or a key combination the user can press, in text, tooltips and menus.

```tsx
import { Kbd, KbdGroup } from "@zenoxai/ui/components/kbd"

function KbdDemo() {
  return (
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}
```

## Usage

```tsx
import { Kbd, KbdGroup } from "@zenoxai/ui/components/kbd"

export function CommandMenuShortcut() {
  return (
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}
```

`Kbd` renders one key as a `<kbd>` element. `KbdGroup` lines up the keys of a combination with
a 4px gap; render one `Kbd` per key and no "+" between them.

Write key names as they appear on the keyboard: `Ctrl`, `Shift`, `Enter`, `Esc`, single letters
in uppercase. On a page that detects macOS, show `⌘` and `⌥` instead of `Ctrl` and `Alt`. For
a shortcut inside a [Dropdown Menu](/components/dropdown-menu) item, use
`DropdownMenuShortcut`, which aligns it to the end of the row.

## Examples

### In text

`Kbd` is an inline element 20px tall, so it fits inside a line of help text or an empty state.

```tsx
import { Kbd, KbdGroup } from "@zenoxai/ui/components/kbd"

function KbdInText() {
  return (
    <p className="text-sm text-text-secondary">
      Press <Kbd>/</Kbd> to search alerts, or{" "}
      <KbdGroup>
        <Kbd>Shift</Kbd>
        <Kbd>?</Kbd>
      </KbdGroup>{" "}
      to list every shortcut.
    </p>
  )
}
```

### With icons

An icon inside `Kbd` is sized to 12px. Add the key name as visually hidden text: an icon alone
gives screen readers nothing to read.

```tsx
import { ArrowDownIcon, ArrowUpIcon } from "lucide-react"
import { Kbd, KbdGroup } from "@zenoxai/ui/components/kbd"

function KbdWithIcons() {
  return (
    <p className="flex items-center gap-1.5 text-sm text-text-secondary">
      <KbdGroup>
        <Kbd>
          <ArrowUpIcon />
          <span className="sr-only">Up arrow</span>
        </Kbd>
        <Kbd>
          <ArrowDownIcon />
          <span className="sr-only">Down arrow</span>
        </Kbd>
      </KbdGroup>
      to move between alerts, <Kbd>Enter</Kbd> to open one
    </p>
  )
}
```

### In a tooltip

Inside `TooltipContent`, `Kbd` switches to colors that read on the inverted tooltip background.
Put the action name first, then the shortcut.

```tsx
import { Button } from "@zenoxai/ui/components/button"
import { Kbd } from "@zenoxai/ui/components/kbd"
import { Tooltip, TooltipContent, TooltipTrigger } from "@zenoxai/ui/components/tooltip"

function KbdInTooltip() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="outline" />}>
        Acknowledge
      </TooltipTrigger>
      <TooltipContent>
        Acknowledge alert <Kbd>A</Kbd>
      </TooltipContent>
    </Tooltip>
  )
}
```

### In an input

A hint for the shortcut that focuses a search field, placed in an end `InputGroupAddon`.

```tsx
import { SearchIcon } from "lucide-react"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@zenoxai/ui/components/input-group"
import { Kbd } from "@zenoxai/ui/components/kbd"

function KbdInInputGroup() {
  return (
    <InputGroup className="max-w-xs">
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupInput aria-label="Search assets" placeholder="Search assets" />
      <InputGroupAddon align="inline-end">
        <Kbd>/</Kbd>
      </InputGroupAddon>
    </InputGroup>
  )
}
```

## Accessibility

- `Kbd` only displays a shortcut; registering the key handler is up to the app. Do not make a
  shortcut the only way to reach an action.
- Screen readers read the text inside `<kbd>` as written. Symbols such as `⌘` are read
  inconsistently, so prefer words, or add the name in a `sr-only` span.
- `Kbd` ignores pointer events and cannot be selected, so it never takes a click meant for the
  button or input around it.

## API reference

`import { ... } from "@zenoxai/ui/components/kbd"`

### Kbd

No props of its own.

### KbdGroup

No props of its own.