Command

The Command component wraps individual keys in a <Kbd /> component.

Import#

import { Command } from '@saas-ui/react'

<Command>shift H</Command>

Guideline#

All shortcuts should do their best to match what appears on the user’s keyboard. Use useHotkeys to manage and register your hotkey actions.

• All single letters A-Z are uppercase.
• For non-letter keys such as enter, esc and shift, stick to lowercase.
• Use symbols (⌥ ⇧ ⌃ ⌘) 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, used on Windows and Unix machines.

<Command>shift+X</Command>

For a sequence of keys where one must follow the other, write "then" in between. Stick to lowercase to match the non-letter keys.

<Command>G then D</Command>

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.

<Command>alt or option</Command>

Use in tooltips#

<Tooltip
  label={
    <>
      Go to dashboard <Command>G then D</Command>
    </>
  }
>
  <Button>Dashboard</Button>
</Tooltip>