Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add kbd

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

The <x-aura::kbd> component renders an inline keyboard key indicator styled to resemble a physical key. Use it to display keyboard shortcuts, hotkeys, or key combinations in documentation, tooltips, or UI hints.

Basic Usage

Ctrl 
<x-aura::kbd>Ctrl</x-aura::kbd>
<x-aura::kbd>Ctrl</x-aura::kbd>

Props

Prop Type Default Description
size string 'md' Key size: sm, md, lg.

Variants / Examples

Single Keys

Esc Tab Enter Space 
<div class="flex items-center gap-2">
    <x-aura::kbd>Esc</x-aura::kbd>
    <x-aura::kbd>Tab</x-aura::kbd>
    <x-aura::kbd>Enter</x-aura::kbd>
    <x-aura::kbd>Space</x-aura::kbd>
</div>
<x-aura::kbd>Esc</x-aura::kbd>
<x-aura::kbd>Tab</x-aura::kbd>
<x-aura::kbd>Enter</x-aura::kbd>
<x-aura::kbd>Space</x-aura::kbd>

Keyboard Shortcuts

Ctrl + C Copy
Ctrl + Shift + P Command Palette
Alt + F4 Close Window 
<div class="space-y-3">
    <div class="flex items-center gap-1">
        <x-aura::kbd>Ctrl</x-aura::kbd>
        <span class="text-aura-surface-400">+</span>
        <x-aura::kbd>C</x-aura::kbd>
        <span class="ml-2 text-sm text-aura-surface-500">Copy</span>
    </div>
    <div class="flex items-center gap-1">
        <x-aura::kbd>Ctrl</x-aura::kbd>
        <span class="text-aura-surface-400">+</span>
        <x-aura::kbd>Shift</x-aura::kbd>
        <span class="text-aura-surface-400">+</span>
        <x-aura::kbd>P</x-aura::kbd>
        <span class="ml-2 text-sm text-aura-surface-500">Command Palette</span>
    </div>
    <div class="flex items-center gap-1">
        <x-aura::kbd>Alt</x-aura::kbd>
        <span class="text-aura-surface-400">+</span>
        <x-aura::kbd>F4</x-aura::kbd>
        <span class="ml-2 text-sm text-aura-surface-500">Close Window</span>
    </div>
</div>
<div class="flex items-center gap-1">
    <x-aura::kbd>Ctrl</x-aura::kbd>
    <span class="text-aura-surface-400">+</span>
    <x-aura::kbd>C</x-aura::kbd>
    <span class="ml-2 text-sm text-aura-surface-500">Copy</span>
</div>

Size Comparison

Ctrl

Small

Ctrl

Medium

Ctrl

Large

<div class="flex items-end gap-4">
    <div class="text-center">
        <x-aura::kbd size="sm">Ctrl</x-aura::kbd>
        <p class="mt-1 text-xs text-aura-surface-500">Small</p>
    </div>
    <div class="text-center">
        <x-aura::kbd size="md">Ctrl</x-aura::kbd>
        <p class="mt-1 text-xs text-aura-surface-500">Medium</p>
    </div>
    <div class="text-center">
        <x-aura::kbd size="lg">Ctrl</x-aura::kbd>
        <p class="mt-1 text-xs text-aura-surface-500">Large</p>
    </div>
</div>
<x-aura::kbd size="sm">Ctrl</x-aura::kbd>
<x-aura::kbd size="md">Ctrl</x-aura::kbd>
<x-aura::kbd size="lg">Ctrl</x-aura::kbd>

Accessibility

  • The <kbd> element is a semantic HTML element recognized by screen readers as keyboard input.
  • When displaying shortcuts, pair keys with descriptive text labels for clarity.