Kbd (Keyboard Key)

A component for displaying keyboard keys or shortcuts in documentation or UI.

Examples

Basic Usage

Display single keys or combinations.

Press Ctrl + C to copy.

blade

<div class="flex items-center space-x-2">
    <span>Press</span>
    <x-plume::kbd>Ctrl</x-plume::kbd>
    <span>+</span>
    <x-plume::kbd>C</x-plume::kbd>
    <span>to copy.</span>
</div>

Sizes

Available in different sizes.

Cmd sm

Cmd md

Cmd lg

blade

<div class="flex items-end space-x-4">
    <div class="flex flex-col items-center space-y-2">
        <x-plume::kbd size="sm">Cmd</x-plume::kbd>
        <span class="text-xs text-foreground/50 dark:text-background-400">sm</span>
    </div>
    <div class="flex flex-col items-center space-y-2">
        <x-plume::kbd size="md">Cmd</x-plume::kbd>
        <span class="text-xs text-foreground/50 dark:text-background-400">md</span>
    </div>
    <div class="flex flex-col items-center space-y-2">
        <x-plume::kbd size="lg">Cmd</x-plume::kbd>
        <span class="text-xs text-foreground/50 dark:text-background-400">lg</span>
    </div>
</div>

Prop	Type	Default	Description
size	string	'md'	Size of the component: 'sm', 'md', 'lg'.

Usage

blade

<x-plume::kbd>Ctrl</x-plume::kbd>
<x-plume::kbd size="sm">Cmd</x-plume::kbd>