# `PhiaUi.Components.Kbd`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/display/kbd.ex#L1)

Keyboard shortcut display component.

Renders a semantic `<kbd>` HTML element styled to resemble a physical
keyboard key. Use it in tooltips, help overlays, command menus, and
instructional UI text to communicate keyboard shortcuts clearly.

The `<kbd>` element is part of HTML5 and carries semantic meaning:
screen readers may announce it with a distinct tone, and it appears
in the accessibility tree as a keyboard input element.

## Examples

### Single key

    <p>Press <.kbd>Enter</.kbd> to submit.</p>

### Modifier + key combination

Render individual `<kbd>` elements for each key in the combination,
separated by a `+` character or within a flex container:

    <span class="flex items-center gap-1">
      <.kbd>⌘</.kbd>
      <span class="text-muted-foreground text-xs">+</span>
      <.kbd>K</.kbd>
    </span>

### Common modifier symbols

Use Unicode characters for standard modifier keys:
- `⌘` — Command (macOS)
- `⌃` — Control
- `⌥` — Option / Alt
- `⇧` — Shift
- `⌫` — Backspace / Delete

### In a command menu (Command+K shortcut hint)

    <div class="flex items-center justify-between">
      <span class="text-sm">Search</span>
      <span class="flex items-center gap-0.5">
        <.kbd>⌘</.kbd>
        <.kbd>K</.kbd>
      </span>
    </div>

### In a tooltip

    <.tooltip>
      <:trigger>
        <.button variant={:ghost} size={:icon}>
          <.icon name="save" />
        </.button>
      </:trigger>
      <:content>
        Save
        <span class="ml-2 flex items-center gap-0.5">
          <.kbd>⌘</.kbd><.kbd>S</.kbd>
        </span>
      </:content>
    </.tooltip>

### In a help table

    <table>
      <tbody>
        <tr>
          <td>Open search</td>
          <td class="flex gap-1"><.kbd>⌘</.kbd><.kbd>K</.kbd></td>
        </tr>
        <tr>
          <td>Close dialog</td>
          <td><.kbd>Esc</.kbd></td>
        </tr>
        <tr>
          <td>Submit form</td>
          <td><.kbd>Enter</.kbd></td>
        </tr>
      </tbody>
    </table>

### Custom size

    <%!-- Smaller kbd for dense UI --%>
    <.kbd class="text-[9px] h-4">Tab</.kbd>

## Accessibility

The `<kbd>` element is natively understood by screen readers. Wrap
combinations in a `<span aria-label="Command K">` when you need to
ensure the full shortcut is announced as a unit rather than individual
characters.

# `kbd`

Renders a styled `<kbd>` element representing a keyboard key or shortcut.

Applies a border, subtle shadow, and monospace font to mimic the
appearance of a physical keyboard key. The `select-none` utility prevents
accidental text selection when clicking shortcut hints.

Inherits semantic meaning from the HTML `<kbd>` element — screen readers
may announce keyboard input context for the contained text.

## Example

    <p>Press <.kbd>Escape</.kbd> to cancel.</p>

## Attributes

* `class` (`:string`) - Additional CSS classes merged via `cn/1`. Use `text-[N]` to override font size or `h-N` to change height. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<kbd>` element.
## Slots

* `inner_block` (required) - Key label, symbol, or text. Use Unicode modifier symbols (⌘, ⌃, ⌥, ⇧) for macOS, or text labels (Ctrl, Alt, Shift) for cross-platform display.

---

*Consult [api-reference.md](api-reference.md) for complete listing*