# Kbd

Keyboard keys and key combinations.

Group: Layout

## Import

```tsx
import { Kbd, KbdGroup } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function KbdDemo() {
  const [open, setOpen] = useState(false)
  return (
    <HStack gap="4" wrap="wrap">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>⌥</Kbd>
        <Kbd>⌃</Kbd>
      </KbdGroup>
      <KbdGroup separator="+">
        <Kbd>Ctrl</Kbd>
        <Kbd>B</Kbd>
      </KbdGroup>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open Menu
      </Button>
      <Command.Dialog open={open} onOpenChange={setOpen}>
        <Command.Input placeholder="Type a command or search…" />
        <Command.List>
          <Command.Group heading="Navigation">
            <Command.Item>
              <FolderIcon />
              Folders
              <Command.Shortcut>
                <KbdGroup>
                  <Kbd>⌘</Kbd>
                  <Kbd>F</Kbd>
                </KbdGroup>
              </Command.Shortcut>
            </Command.Item>
          </Command.Group>
          <Command.Empty />
        </Command.List>
      </Command.Dialog>
    </HStack>
  )
}
```

## Props

### KbdGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `separator` | `ReactNode` |  | Inserted between keys, e.g. `"+"`. |

`*` = required. Style props and HTML attributes are accepted too.