Kbd

Usage

Press <Kbd>⌘K</Kbd> to open search.
Use <Kbd>Esc</Kbd> to close any modal.

Press ⌘K to open search.

Use Esc to close any modal.

Multi-key shortcuts

For shortcuts with modifiers, render each key separately and join with a literal +:

Save with <Kbd>⌘</Kbd> + <Kbd>S</Kbd>.
Force reload with <Kbd>⌘</Kbd> + <Kbd>Shift</Kbd> + <Kbd>R</Kbd>.

Save with ⌘ + S.

Force reload with ⌘ + Shift + R.

Cross-platform shortcuts

For shortcuts that differ between macOS and Windows/Linux, use <Tabs> to show both:

<Tabs>
  <TabsList>
    <TabsTrigger value="mac">macOS</TabsTrigger>
    <TabsTrigger value="win">Windows / Linux</TabsTrigger>
  </TabsList>
  <TabsContent value="mac">
    Open search: <Kbd>⌘</Kbd> + <Kbd>K</Kbd>
  </TabsContent>
  <TabsContent value="win">
    Open search: <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>
  </TabsContent>
</Tabs>

Accessibility

<Kbd> renders as the native HTML <kbd> element so screen readers announce it correctly as a keyboard input.

Props