@thebase/ui/docs/components/kbd.md

CDN-installable Owl and Bootstrap 5 UI component library.

# Kbd

## Pure Owl component

```js
import { Kbd } from "@thebase/ui";
```

```base-ui
<div style="max-width: 28rem" class="d-flex flex-column align-items-center gap-4 w-100">
  <div class="d-flex align-items-center gap-1">
    <Kbd>⌘</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>⌥</Kbd>
    <Kbd>⌃</Kbd>
  </div>
  <p class="text-body-secondary small text-center mb-0">
    Use <Kbd>⌘</Kbd><Kbd>V</Kbd> to paste text.
  </p>
  <Button variant="'outline'">
    <t t-set-slot="default">
      Accept <Kbd className="'ms-2'">⏎ Enter</Kbd>
    </t>
  </Button>
  <InputGroup class="w-100">
    <InputGroupInput placeholder="'Search...'"/>
    <InputGroupAddon align="'inline-end'">
      <Kbd>⌘K</Kbd>
    </InputGroupAddon>
  </InputGroup>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Kbd` | `className` | `String` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<kbd b-ui="kbd">Ctrl K</kbd>
```