Keyboard Key
The keyboard key component exists to show which key or combination of keys performs a given action.
Import
import { Kbd } from "@recastui/react";
Usage
<><Kbd>Ctrl</Kbd> + <Kbd>C</Kbd></>
Guideline
All shortcuts should do their best to match what appears on the user’s keyboard.
All single letters A-Z are uppercase. For non-letter keys such as enter, esc and shift, stick to lowercase. Use the arrow symbol as opposed to spelling things out.
Modifier
The only punctuation you should need is the + to indicate that a combination of keys will activate the shortcut.
<><Kbd>Ctrl</Kbd> + <Kbd>C</Kbd></>
For a sequence of keys where one must follow the other, write “then” in between. Stick to lowercase to match the non-letter keys.
<><Kbd>Ctrl</Kbd> then <Kbd>C</Kbd></>
If two different keys can execute the same action or the shortcut itself may look different on the user’s keyboard, write “or” in between.
<><Kbd>Ctrl</Kbd> or <Kbd>Cmd</Kbd></>
Size
There are three sizes available: ‘sm‘, ‘md‘, ‘lg’. Default is ‘sm‘.
<div className='space-x-3'><Kbd size='sm'>Ctrl</Kbd><Kbd size='md'>Ctrl</Kbd><Kbd size='lg'>Ctrl</Kbd></div>
Props
Prop | Type | Description |
---|---|---|
children | React.ReactNode | The content of the Kbd component |
className | string (optional) | Additional class names to apply |