Kbd
Kbd is a native web component that renders a shortcut key as a small inline monospace chip. Use it to represent keyboard shortcuts in text, menus, or usage hints, such as ⌘K or Ctrl. The key content is defined by the default slot, with no additional configuration.
Preview
<p style="display: flex; align-items: center; gap: 8px; font-family: sans-serif;">
Press <pura-kbd>⌘</pura-kbd> <pura-kbd>K</pura-kbd> to search
</p>
<p style="display: flex; align-items: center; gap: 8px; font-family: sans-serif;">
Save with <pura-kbd>Ctrl</pura-kbd> <pura-kbd>S</pura-kbd>
</p>Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/kbd.js"></script>import "./pura/lib/kbd.js";