Kbd
Shows one key in running text or in a hint. Use KeyCombo for a combination.
- Kbd
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Kbd
Press Esc to close, Enter to confirm.
CommandShiftUp arrowPgDnF12
Dark theme, Kbd
Press Esc to close, Enter to confirm.
CommandShiftUp arrowPgDnF12
High contrast theme, Kbd
Press Esc to close, Enter to confirm.
CommandShiftUp arrowPgDnF12
UsageLink to the section Usage
import { Kbd } from '@skribly/ui/actions'Press <Kbd>Esc</Kbd> to close.
<Kbd label="Command">⌘</Kbd>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Renders a kbd element.
- A symbol key takes label, which screen readers say in place of the glyph, so "⌘" is read as "Command" rather than "place of interest sign".
This demo runs through axe in all three themes on every test run. See what the tests check.