Ravox KitBasics
Kbd
A key or key combination for menus, hints and the command palette. Write "mod+k" and Mac users see ⌘ K; on Windows and Linux, Ctrl + K. Screen readers hear the key name, not the symbol.
ControlK
Settings
Examples
Mac and Windows side by side
- Buscar
- CommandK
- ControlK
- Novo pedido
- CommandOptionN
- ControlAltN
- Desfazer
- CommandShiftZ
- ControlShiftZ
In the search field
Inline in text
Aperte / para buscar, Esc para fechar e ControlEnter para enviar a resposta.
In a menu
- DuplicarControlD
- RenomearF2
- Mover para…ControlShiftM
- ApagarDelete
Installation
The command creates components/ui/kbd.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add kbdProps
| Prop | Type | Default | Description |
|---|---|---|---|
| keys | string | string[] | — | "mod+k", "shift+alt+n" or ["mod", "enter"]. Names that change by system: mod, cmd, ctrl, alt, shift, enter, esc, tab, backspace, delete, space and the arrows (up, down, left, right). |
| platform | "auto" | "mac" | "other" | "auto" | auto detects after hydration (the server sends the Ctrl version). Force it for documentation and screenshots. |
| size | "sm" | "md" | "md" | Small for use inside menus and fields. |
| KbdKey | componente | — | A single key: <KbdKey>Esc</KbdKey>. Accepts size and everything a <kbd> accepts. |
| useApple() | () => boolean | — | true on Mac/iPhone/iPad. Use it in your onKeyDown to check metaKey or ctrlKey. |