Keycap
Pixel keycaps that press down when you press the real key.
<piix-kbd>WebGLPress
<p>Press <piix-kbd>⌘</piix-kbd> <piix-kbd>K</piix-kbd> to search, <piix-kbd>esc</piix-kbd> to close.</p>
Theme
Size
Chunky keycaps with a lit top and a skirt underneath, for shortcut hints, onboarding and docs. Press that key on your keyboard and the cap goes down with you. Symbols like ⌘ ⇧ ⌥ ↵ and words like esc, ctrl and shift know which key they are.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just keycap (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/kbd.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<p>Press <piix-kbd>⌘</piix-kbd> <piix-kbd>K</piix-kbd> to search, <piix-kbd>esc</piix-kbd> to close.</p>
);
}
Usage
<p>Press <piix-kbd>⌘</piix-kbd> <piix-kbd>K</piix-kbd> to search, <piix-kbd>esc</piix-kbd> to close.</p>
Examples
Arrow keys
Try them.
<piix-kbd theme="dark">↑</piix-kbd> <piix-kbd theme="dark">←</piix-kbd> <piix-kbd theme="dark">↓</piix-kbd> <piix-kbd theme="dark">→</piix-kbd>
API reference
| Attribute | What it does | Default |
|---|---|---|
key | the key to listen for, if the label is not it | its label |
theme | light dark lime | light |
size | sm md lg | md |
Accessibility
- It is a
<kbd>element, read as keyboard text.