Kbd

# Brok UI: Kbd (`kbd`)

Displays a keyboard key or key combination.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add kbd
```

## Usage

```blade
<p class="text-sm text-muted-foreground">
    {{ __('Press') }}
    <x-ui.kbd.group>
        <x-ui.kbd>⌘</x-ui.kbd>
        <x-ui.kbd>K</x-ui.kbd>
    </x-ui.kbd.group>
    {{ __('to open the command menu.') }}
</p>
```

## Use when

- Use to summarize, sequence, or present data so users can scan it quickly.
- Representing a keyboard key or a shortcut combination inline in text, such as documentation or a tooltip.

## Avoid when

- Do not add display-only ornament when the user needs actionable structure or exact comparison instead.
- Labeling a clickable control; use button instead, since kbd carries no interactive semantics.

## Anti-patterns

- Adding display ornament without informational value

## Rules

- Use the `<brok:kbd>` tag (or `<x-ui.kbd>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/kbd
- Registry JSON (files, props, contract): https://brokui.dev/r/open/kbd.json