Kbd

Styles a keyboard key.

⌘K

import { BuiKbd, BuiKbdGroup } from 'ng-blatui';

<kbd buiKbdGroup><kbd buiKbd>⌘</kbd><kbd buiKbd>K</kbd></kbd>

Icons

<kbd buiKbd aria-label="Command"><svg><!-- command --></svg></kbd>
<kbd buiKbd aria-label="Enter"><svg><!-- enter --></svg></kbd>

In button

<button buiButton variant="outline" size="sm">Accept <kbd buiKbd>⏎</kbd></button>

Shortcuts

Open command menu⌘K

Search⌘F

Save⌘S

<div class="flex items-center justify-between">
  <span>Open command menu</span>
  <kbd buiKbdGroup><kbd buiKbd>⌘</kbd><kbd buiKbd>K</kbd></kbd>
</div>

Sizes

EscEscEsc

<kbd buiKbd class="text-[10px]">Esc</kbd>
<kbd buiKbd>Esc</kbd>
<kbd buiKbd class="px-2 py-1 text-sm">Esc</kbd>

API reference

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.