Primitive
Keyboard Key CSS-only
Keyboard shortcut keys. Renders <kbd> with mono type and a subtle bottom-bordered chip look.
About
Overview
Use <kbd> for keyboard shortcuts in tooltips, menus, command palettes, and documentation. Combine with + for chords like <kbd>Cmd</kbd>+<kbd>K</kbd>.
Live
Demo
Tab⌘+KShift+EnterEsc
Press <kbd class="ren-kbd">⌘</kbd>+<kbd class="ren-kbd">K</kbd> to open the command palette.Reference
API
| Class | Effect |
|---|---|
.ren-kbd | Apply on <kbd>. Mono type, subtle border, slightly bolder bottom border for the "key cap" feel. |
Inclusive by default
Accessibility
Always use the semantic <kbd> tag. Screen readers announce it appropriately. Inside menus or tooltips, the parent already provides context.