K
KoreUI

Kbd

UI

Componente para representar teclas de teclado. Ideal para atajos y documentación de shortcuts.

Uso básico

K Ctrl + C 
<x-kore::kbd>K</x-kore::kbd>
<x-kore::kbd>Ctrl</x-kore::kbd> + <x-kore::kbd>C</x-kore::kbd>
<x-kore::kbd>K</x-kore::kbd>
<x-kore::kbd>Ctrl</x-kore::kbd> + <x-kore::kbd>C</x-kore::kbd>

Tamaños

Tres tamaños: sm, md (default), lg.

A A A 
<x-kore::kbd size="sm">A</x-kore::kbd>
<x-kore::kbd>A</x-kore::kbd>
<x-kore::kbd size="lg">A</x-kore::kbd>
<x-kore::kbd size="sm">A</x-kore::kbd>
<x-kore::kbd>A</x-kore::kbd>
<x-kore::kbd size="lg">A</x-kore::kbd>

Combinaciones

Combina varias teclas para mostrar atajos completos.

⌘ + Shift + P
Ctrl + Alt + Del 
<div class="flex items-center gap-1">
    <x-kore::kbd>⌘</x-kore::kbd> + <x-kore::kbd>Shift</x-kore::kbd> + <x-kore::kbd>P</x-kore::kbd>
</div>

<div class="flex items-center gap-1">
    <x-kore::kbd>Ctrl</x-kore::kbd> + <x-kore::kbd>Alt</x-kore::kbd> + <x-kore::kbd>Del</x-kore::kbd>
</div>
<div class="flex items-center gap-1">
    <x-kore::kbd>⌘</x-kore::kbd> + <x-kore::kbd>Shift</x-kore::kbd> + <x-kore::kbd>P</x-kore::kbd>
</div>

<div class="flex items-center gap-1">
    <x-kore::kbd>Ctrl</x-kore::kbd> + <x-kore::kbd>Alt</x-kore::kbd> + <x-kore::kbd>Del</x-kore::kbd>
</div>

Props

Prop Tipo Default Descripción
size string md Tamaño: sm, md, lg