Kbd
Used to display textual user input from keyboard.
⌘
⇧
⌥
⌃
Ctrl
+
B
<div class="flex flex-col items-center gap-4">
<span class="kbd-group">
<kbd class="kbd">⌘</kbd>
<kbd class="kbd">⇧</kbd>
<kbd class="kbd">⌥</kbd>
<kbd class="kbd">⌃</kbd>
</span>
<span class="kbd-group">
<kbd class="kbd">Ctrl</kbd>
<span>+</span>
<kbd class="kbd">B</kbd>
</span>
</div>
Usage
Use the <kbd> element with the kbd class. Use kbd-group to group multiple keys.
<kbd class="kbd">⌘K</kbd>
Examples
Group
Use Ctrl + B Ctrl + K to open the command palette
<p class="text-muted-foreground text-sm">
Use
<span class="kbd-group">
<kbd class="kbd">Ctrl + B</kbd>
<kbd class="kbd">Ctrl + K</kbd>
</span>
to open the command palette
</p>
Button
<div class="flex flex-wrap items-center gap-x-4">
<button class="btn-sm-outline pe-2">
Accept
<kbd class="kbd">⏎</kbd>
</button>
<button class="btn-sm-outline pe-2">
Cancel
<kbd class="kbd">Esc</kbd>
</button>
</div>
Input Group
/
<div class="relative w-full max-w-sm">
<input type="search" class="input ps-9 pe-12" placeholder="Search..." />
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground">
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<kbd class="kbd absolute end-3 top-1/2 -translate-y-1/2">/</kbd>
</div>
RTL
Keyboard labels are direction-neutral. Surrounding spacing should use logical utilities when position matters.
استخدم Ctrl K لفتح البحث
<p dir="rtl" class="text-muted-foreground text-sm">
استخدم
<span class="kbd-group">
<kbd class="kbd">Ctrl</kbd>
<kbd class="kbd">K</kbd>
</span>
لفتح البحث
</p>