PhiaUi.Components.Kbd (phia_ui v0.1.17)

Copy Markdown View Source

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.

Summary

Functions

kbd(assigns)

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

Functions

kbd(assigns)

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.