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

Plain

Set variant="plain" to show the shortcut as plain text without the key cap, for example as a hint inside a menu item or tooltip.

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`

as`HTML element string or Component`

Default:'kbd'

What element or component should be rendered.

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`

Whether to render the inverted (dark) variant.

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

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

variant`KeyboardShortcutVariant`

'keycap' draws each shortcut as a key cap; 'plain' renders the same keys as plain text, e.g. for a hint inside a menu item or tooltip.

KeyboardShortcut

PlumaKeyboardShortcut extends Text

asHTML element string or Component

hotkeyHotkey(required)

isInvertedboolean

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

variantKeyboardShortcutVariant

On this page

`PlumaKeyboardShortcut` `extends Text`

as`HTML element string or Component`

hotkey`Hotkey`(required)

isInverted`boolean`

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

variant`KeyboardShortcutVariant`