Kbd

Shows a key or a keyboard shortcut, like Ctrl S.

Library

⌘⇧⌥⌃Ctrl+S

Installation

pnpm dlx shadcn@latest add @wisty/kbd

The CLI installs the Radix or Base UI file to match your project.

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

Create an app with KbdBuild in Wisty to publish inside Salesforce in minutes. Nothing to deploy.Open in Wisty

When to use

Use it

Text names a key or a keyboard shortcut, like "Press / to search".
A help panel lists an app's shortcuts, as Lightning's keyboard shortcuts list does.
A tooltip shows the shortcut for an action.

Don't use it

The text is code or a value people copy. Use a code element.
The key is an action people click. Use Button.
Inside a Dropdown menu item, use DropdownMenuShortcut, which follows the menu's text.

Usage

Wrap each key in a Kbd, and the keys of one shortcut in a KbdGroup, so the combination reads as one input.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

<p>
  Press <Kbd>/</Kbd> to search, or{" "}
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>S</Kbd>
  </KbdGroup>{" "}
  to save.
</p>

API reference

Part	Built on
`Kbd`	`<kbd>` (opens in a new tab)
`KbdGroup`	`<div>` (opens in a new tab)

SLDS mapping

SLDS has no keyboard key. Kbd is a small gray key built from SLDS tokens: the gray container fill, the secondary text color and the theme's smallest radius, with text at the menu text size.

Known gaps:

No SLDS blueprint to match. The look follows SLDS's keyboard interaction guidelines and tokens, not a component.

Accessibility

Screen readers read the key's text, so write keys as people see them on the keyboard, like Ctrl or Esc.
A key ignores the pointer and its text can't be selected. A title or tooltip on a Kbd never shows; put it on the element around it.

Responsive behavior

A key doesn't wrap, and a group keeps its keys on one line. In a narrow column, a long shortcut can push past the edge.

Rules

Put a + or other separator between keys as plain text inside the group, not in a Kbd, or it reads as a key.
Don't override the key's fill, radius or text size. They come from the theme.