Kbd
Keyboard shortcut display with monospace font and key-cap styling.
Default
Press Ctrl + S to save
Base
| Class | Description |
|---|---|
.ui-kbd | Base class |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-kbd-font-size |
var(--ui-font-size-sm) |
Font size |
--ui-kbd-font-family |
var(--ui-font-mono) |
Font family |
--ui-kbd-padding-x |
var(--ui-space-0) |
Horizontal padding |
--ui-kbd-padding-y |
var(--ui-space-0) |
Vertical padding |
--ui-kbd-bg |
var(--ui-color-bg-subtle) |
Background color |
--ui-kbd-border-color |
var(--ui-color-border) |
Border color |
--ui-kbd-radius |
var(--ui-radius-sm) |
Corner radius |
--ui-kbd-color |
var(--ui-color-text) |
Text color |
Variations
Esc
Enter
Tab
Shift
Space
<kbd class="ui-kbd">Esc</kbd>
<kbd class="ui-kbd">Enter</kbd>
<kbd class="ui-kbd">Tab</kbd>
<kbd class="ui-kbd">Shift</kbd>
<kbd class="ui-kbd">Space</kbd>