email-organizer/offline-docs/daisyui/kbd.md

daisyUI Documentation - Kbd Component

Kbd is used to display keyboard shortcuts.

Classes and Usage

Core Classes:

• kbd - The main kbd element
• kbd-xs - Extra small size
• kbd-sm - Small size
• kbd-md - Medium size [Default]
• kbd-lg - Large size
• kbd-xl - Extra large size

Examples

Basic Kbd

K

<kbd class="kbd">K</kbd>

Kbd Sizes

Xsmall Small Medium Large Xlarge

<kbd class="kbd kbd-xs">Xsmall</kbd>
<kbd class="kbd kbd-sm">Small</kbd>
<kbd class="kbd kbd-md">Medium</kbd>
<kbd class="kbd kbd-lg">Large</kbd>
<kbd class="kbd kbd-xl">Xlarge</kbd>

In Text

Press F to pay respects.

Press
<kbd class="kbd kbd-sm">F</kbd>
to pay respects.

Key Combination

ctrl + shift + del

<kbd class="kbd">ctrl</kbd>
+
<kbd class="kbd">shift</kbd>
+
<kbd class="kbd">del</kbd>

Function Keys

⌘ ⌥ ⇧ ⌃

<kbd class="kbd">⌘</kbd>
<kbd class="kbd">⌥</kbd>
<kbd class="kbd">⇧</kbd>
<kbd class="kbd">⌃</kbd>

A Full Keyboard

<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="kbd">q</kbd>
  <kbd class="kbd">w</kbd>
  <kbd class="kbd">e</kbd>
  <kbd class="kbd">r</kbd>
  <kbd class="kbd">t</kbd>
  <kbd class="kbd">y</kbd>
  <kbd class="kbd">u</kbd>
  <kbd class="kbd">i</kbd>
  <kbd class="kbd">o</kbd>
  <kbd class="kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="kbd">a</kbd>
  <kbd class="kbd">s</kbd>
  <kbd class="kbd">d</kbd>
  <kbd class="kbd">f</kbd>
  <kbd class="kbd">g</kbd>
  <kbd class="kbd">h</kbd>
  <kbd class="kbd">j</kbd>
  <kbd class="kbd">k</kbd>
  <kbd class="kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="kbd">z</kbd>
  <kbd class="kbd">x</kbd>
  <kbd class="kbd">c</kbd>
  <kbd class="kbd">v</kbd>
  <kbd class="kbd">b</kbd>
  <kbd class="kbd">n</kbd>
  <kbd class="kbd">m</kbd>
  <kbd class="kbd">/</kbd>
</div>

Arrow Keys

<div class="flex w-full justify-center">
  <kbd class="kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
  <kbd class="kbd">◀︎</kbd>
  <kbd class="kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
  <kbd class="kbd">▼</kbd>
</div>

Features

• Displays keyboard shortcuts and key combinations
• Multiple size options (xs, sm, md, lg, xl)
• Works with individual keys or combinations
• Can be styled to look like physical keyboard keys
• Responsive design

This component is useful for documenting keyboard shortcuts in applications or guides.