Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Kbd

<c-lb.kbd /> Markdown

Kbd component for Django: display keyboard shortcuts and key combinations. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Kbd wraps text in a styled <kbd> element to communicate keyboard shortcuts or key names. Size variants match the standard labb size scale from xs to xl.

Basic Kbd

A 
<c-lb.kbd>A</c-lb.kbd>

Variants

neutral primary secondary accent info success warning error 
<c-lb.kbd variant="neutral">neutral</c-lb.kbd>
<c-lb.kbd variant="primary">primary</c-lb.kbd>
<c-lb.kbd variant="secondary">secondary</c-lb.kbd>
<c-lb.kbd variant="accent">accent</c-lb.kbd>
<c-lb.kbd variant="info">info</c-lb.kbd>
<c-lb.kbd variant="success">success</c-lb.kbd>
<c-lb.kbd variant="warning">warning</c-lb.kbd>
<c-lb.kbd variant="error">error</c-lb.kbd>

Sizes

xs sm md lg xl 
<c-lb.kbd size="xs">xs</c-lb.kbd>
<c-lb.kbd size="sm">sm</c-lb.kbd>
<c-lb.kbd size="md">md</c-lb.kbd>
<c-lb.kbd size="lg">lg</c-lb.kbd>
<c-lb.kbd size="xl">xl</c-lb.kbd>

With Icon

K + + 
<c-lb.kbd icon="rmx.command">K</c-lb.kbd>
+
<c-lb.kbd icon="rmx.arrow-up" />
+
<c-lb.kbd icon="rmx.arrow-down" />

Key Combination

ctrl + shift + del 
<c-lb.kbd>ctrl</c-lb.kbd>
+
<c-lb.kbd>shift</c-lb.kbd>
+
<c-lb.kbd>del</c-lb.kbd>

Inline Text

Press F to pay respects.

<p>Press <c-lb.kbd size="sm">F</c-lb.kbd> to pay respects.</p>

Function Keys

F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 
<div class="flex gap-1">
    <c-lb.kbd size="sm">F1</c-lb.kbd>
    <c-lb.kbd size="sm">F2</c-lb.kbd>
    <c-lb.kbd size="sm">F3</c-lb.kbd>
    <c-lb.kbd size="sm">F4</c-lb.kbd>
    <c-lb.kbd size="sm">F5</c-lb.kbd>
    <c-lb.kbd size="sm">F6</c-lb.kbd>
    <c-lb.kbd size="sm">F7</c-lb.kbd>
    <c-lb.kbd size="sm">F8</c-lb.kbd>
    <c-lb.kbd size="sm">F9</c-lb.kbd>
    <c-lb.kbd size="sm">F10</c-lb.kbd>
    <c-lb.kbd size="sm">F11</c-lb.kbd>
    <c-lb.kbd size="sm">F12</c-lb.kbd>
</div>

Arrow Keys

▲
◄ ▼ ► 
<div class="flex flex-col items-center gap-1">
    <c-lb.kbd>▲</c-lb.kbd>
    <div class="flex gap-1">
        <c-lb.kbd>◄</c-lb.kbd>
        <c-lb.kbd>▼</c-lb.kbd>
        <c-lb.kbd>►</c-lb.kbd>
    </div>
</div>

Full Keyboard (RGB)

Esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12
` 1 2 3 4 5 6 7 8 9 0 - = ⌫
Tab Q W E R T Y U I O P [ ] \
Caps A S D F G H J K L ; ' Enter
Shift Z X C V B N M , . / Shift
Ctrl ⌘ Alt Space Alt ⌘ Fn Ctrl 
<div class="flex flex-col gap-1">
    <div class="flex gap-1">
        <c-lb.kbd size="sm" variant="error">Esc</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">F1</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">F2</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">F3</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">F4</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">F5</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">F6</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">F7</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">F8</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">F9</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">F10</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">F11</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">F12</c-lb.kbd>
    </div>
    <div class="flex gap-1">
        <c-lb.kbd size="sm" variant="error">`</c-lb.kbd>
        <c-lb.kbd size="sm" variant="error">1</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">2</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">3</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">4</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">5</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">6</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">7</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">8</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">9</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">0</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">-</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">=</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent" class="px-4">⌫</c-lb.kbd>
    </div>
    <div class="flex gap-1">
        <c-lb.kbd size="sm" variant="error" class="px-3">Tab</c-lb.kbd>
        <c-lb.kbd size="sm" variant="error">Q</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">W</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">E</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">R</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">T</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">Y</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">U</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">I</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">O</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">P</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">[</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">]</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">\</c-lb.kbd>
    </div>
    <div class="flex gap-1">
        <c-lb.kbd size="sm" variant="error" class="px-4">Caps</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">A</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">S</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">D</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">F</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">G</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">H</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">J</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">K</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">L</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">;</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">'</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent" class="px-4">Enter</c-lb.kbd>
    </div>
    <div class="flex gap-1">
        <c-lb.kbd size="sm" variant="error" class="px-5">Shift</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">Z</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">X</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">C</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">V</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info">B</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">N</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">M</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">,</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">.</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">/</c-lb.kbd>
        <c-lb.kbd size="sm" variant="error" class="px-5">Shift</c-lb.kbd>
    </div>
    <div class="flex gap-1">
        <c-lb.kbd size="sm" variant="error">Ctrl</c-lb.kbd>
        <c-lb.kbd size="sm" variant="warning">⌘</c-lb.kbd>
        <c-lb.kbd size="sm" variant="success">Alt</c-lb.kbd>
        <c-lb.kbd size="sm" variant="info" class="px-16">Space</c-lb.kbd>
        <c-lb.kbd size="sm" variant="primary">Alt</c-lb.kbd>
        <c-lb.kbd size="sm" variant="secondary">⌘</c-lb.kbd>
        <c-lb.kbd size="sm" variant="accent">Fn</c-lb.kbd>
        <c-lb.kbd size="sm" variant="error">Ctrl</c-lb.kbd>
    </div>
</div>

API Reference

c-lb.kbd

Property Type Default Required Description
class string - No Additional CSS classes to apply
size
xs sm md lg xl
md No Size of the keyboard key
variant
neutral primary secondary accent info success warning error
- No Color variant for the keyboard key
icon string - No Icon name to display
↳ .fill modifier - No Render in filled (solid) style
icon.class string - No Additional CSS classes for the icon
Slot Name Description
default Key label text
Prev Hover 3D
Next List