# Kbd: Icons and actions

> Put icons in a cap for actions without a key name, and give them a visually hidden label.

Example: https://hextaui.com/docs/kbd/examples/composed
Component docs: https://hextaui.com/docs/kbd.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/kbd-composed.json
```

This adds `components/examples/kbd/composed.tsx` with the Kbd component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/kbd/composed.tsx"
import { IconArrowBackUp, IconClick } from "@tabler/icons-react"

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

export function KbdComposed() {
  return (
    <div className="flex flex-col items-center gap-3 text-sm text-muted-foreground">
      <p className="flex items-center gap-2">
        <KbdGroup>
          <Kbd keys="shift" />
          <Kbd>
            <IconClick aria-hidden="true" />
            <span className="sr-only">Click</span>
          </Kbd>
        </KbdGroup>
        to select a range
      </p>
      <p className="flex items-center gap-2">
        <Kbd>
          <IconArrowBackUp aria-hidden="true" />
          <span className="sr-only">Backspace</span>
        </Kbd>
        to go back
      </p>
    </div>
  )
}
```

## Props in this example

### Kbd

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | `string` | – | Keys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers. |

## More Kbd examples

- [Variants](https://hextaui.com/docs/kbd/examples/variants.md)
- [Sizes](https://hextaui.com/docs/kbd/examples/sizes.md)
- [Shortcuts](https://hextaui.com/docs/kbd/examples/shortcuts.md)
- [Live keys](https://hextaui.com/docs/kbd/examples/listen.md)
- [In a button](https://hextaui.com/docs/kbd/examples/button.md)
- [Right to left](https://hextaui.com/docs/kbd/examples/rtl.md)