KeyCombo
A keyboard shortcut: keys pressed together, a sequence, or several shortcuts that do the same thing. Use it in menus, tooltips and help pages.
- KeyCombo
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, KeyCombo
- Open the command palette
- CtrlKor/
- Save
- CommandS
- Next tab
- CtrlTab
- Go to issues
- GI
Dark theme, KeyCombo
- Open the command palette
- CtrlKor/
- Save
- CommandS
- Next tab
- CtrlTab
- Go to issues
- GI
High contrast theme, KeyCombo
- Open the command palette
- CtrlKor/
- Save
- CommandS
- Next tab
- CtrlTab
- Go to issues
- GI
UsageLink to the section Usage
import { KeyCombo } from '@skribly/ui/actions'<KeyCombo keys={['Ctrl', 'K']} separator="+" />
<KeyCombo keys={[['Ctrl', 'K'], ['/']]} separator="+" orLabel="or" />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
- A kbd element wraps one kbd per key, as HTML describes a combination.
- The separator is hidden from screen readers; the word between alternatives is read.
- Long combinations wrap, and the shortcut list in the demo stacks under 640px.
This demo runs through axe in all three themes on every test run. See what the tests check.