KeyboardShortcut

Figma

Github

Storybook

Displays keyboard shortcuts with platform-aware formatting.

Importing

The component can be imported via:

import { KeyboardShortcut } from '@customerio/pluma-components/react';

Usage

Loading editor

Modifier Combinations

The hotkey prop accepts TanStack Hotkeys notation. Mod maps to ⌘ on macOS and Ctrl on Windows/Linux.

Loading editor

Inverted

Use the isInverted prop for a dark variant, suitable for inverted or dark-mode contexts.

Loading editor

Font Size Scaling

The component extends Text and uses the product-code text style. It scales to match the surrounding font size, so it works inline with headings and body text alike.

Loading editor

Inline Usage

The component renders as a <kbd> element and can be placed inline with text.

Loading editor

Platform Override

Use the platform prop to force a specific platform's display, regardless of the user's OS.

Loading editor

API

`PlumaKeyboardShortcut` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined`

The text color. _{^{(See text color tokens)}}

`family` `"mono" | "sans" | undefined`

The font family. _{^{(See font family tokens)}}

`fontStyle` `"normal" | "italic" | undefined`

The font style. _{^{(See MDN font-style)}}

`hotkey` `Hotkey` (required)

The hotkey string to display (e.g., "Mod+S", "Mod+Shift+Z", "Control+Alt+D"). Uses TanStack Hotkeys notation where "Mod" maps to ⌘ on macOS and Ctrl on Windows/Linux.

Type-safe: provides autocomplete for all valid key combinations including single keys, modifier+key combos, and multi-modifier combos.

`isInverted` `boolean | undefined`

Whether to render the inverted (dark) variant.

`platform` `"mac" | "windows" | "linux" | undefined`

Override automatic platform detection. By default, the component detects the user's OS and formats accordingly.

`size` `"m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined`

The text size. _{^{(See font size tokens)}}

`text` `"product-code" | "product-h1" | "product-h2" | "product-h3" | "product-h4" | "product-label" | "product-label-secondary" | "product-link" | "product-link-secondary" | "product-p" | "product-p-active" | "product-p-secondary" | "product-ps" | "product-ps-active" | "product-pxs" | "product-pxs-active" | "product-pxs-secondary" | undefined`

A predefined typography style. _{^{(See text tokens)}}

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

The font weight. _{^{(See font weight tokens)}}

KeyboardShortcut

PlumaKeyboardShortcut extends Text

color "critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined

family "mono" | "sans" | undefined

fontStyle "normal" | "italic" | undefined

hotkey Hotkey (required)

isInverted boolean | undefined

platform "mac" | "windows" | "linux" | undefined

size "m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined

weight "bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined

On this page

`PlumaKeyboardShortcut` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined`

`family` `"mono" | "sans" | undefined`

`fontStyle` `"normal" | "italic" | undefined`

`hotkey` `Hotkey` (required)

`isInverted` `boolean | undefined`

`platform` `"mac" | "windows" | "linux" | undefined`

`size` `"m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined`

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`