kbd keyboard key shortcut input kbd keyboard key shortcut keycap input hotkey display keyboard keys show key indicators in documentation
Keyboard Key
Fetch pattern JSON:
curl https://webspire.de/patterns/kbd/base.json base.html
<div class="ws-kbd space-y-4 p-6 text-sm leading-relaxed" style="color: var(--ws-color-text-soft);">
<p>
Press <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
+
<kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">K</kbd>
to open the command palette.
</p>
<p>
Use <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Tab</kbd>
to move focus and
<kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Enter</kbd>
to confirm. Press
<kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Esc</kbd>
to cancel.
</p>
<p>
To undo, press
<kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
+
<kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Z</kbd>.
To redo, press
<kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
+
<kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Shift</kbd>
+
<kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Z</kbd>.
</p>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
kbdkeyboardkeyshortcutinput
Slots
| Name | Required | Description |
|---|---|---|
| key | Yes | The key label text inside the kbd element. |
Semantic <kbd> elements styled to resemble physical keyboard keys with border, shadow depth, and rounded corners. Dark mode compatible.