Kbd
The kbd shows a keyboard key or shortcut, like the hints next to menu items, tooltips, and search fields.
Usage
Add the kbd class to a <kbd> element, one per key or combination.
<kbd class="kbd">⌘</kbd>Examples
Group
Keep a sequence of keys together in running text with kbd-group.
Button
A kbd rides along inside a button to hint its shortcut.
Tooltip
Inside a tooltip's inverted panel, the kbd switches to a translucent treatment automatically.
<div class="btn-group">
<button id="kbd-tt-save" class="btn btn-outline">Save</button>
<button id="kbd-tt-print" class="btn btn-outline">Print</button>
</div>
<div class="tooltip" data-sp-toggle="#kbd-tt-save">
Save Changes <kbd class="kbd">S</kbd>
</div>
<div class="tooltip" data-sp-toggle="#kbd-tt-print">
Print Document
<span class="kbd-group">
<kbd class="kbd">Ctrl</kbd>
<kbd class="kbd">P</kbd>
</span>
</div>Input group
Hint a search shortcut in an input group addon.
<div class="input-group">
<input class="input" placeholder="Search..." />
<span class="input-group-addon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span>
<span class="input-group-addon input-group-addon-end">
<kbd class="kbd">⌘</kbd>
<kbd class="kbd">K</kbd>
</span>
</div>RTL
Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.
<div id="kbd-rtl-demo" class="flex flex-col items-center gap-4" dir="rtl">
<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>
<script>
const translations = {
ar: { dir: "rtl" },
he: { dir: "rtl" },
en: { dir: "ltr" },
};
window.addEventListener("message", (e) => {
const t = translations[e.data?.lang];
if (e.data?.type !== "sp-language" || !t) return;
document.getElementById("kbd-rtl-demo").dir = t.dir;
document.querySelectorAll("[data-i18n]").forEach((el) => {
el.textContent = t[el.dataset.i18n];
});
});
</script>