Pluma

Theme

About

MCP Server

Getting started

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

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

Ctrl+S

<KeyboardShortcut hotkey="Mod+S" />

Modifier Combinations

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

Ctrl+SCtrl+Shift+ZCtrl+Alt+HCtrl+Alt+Shift+H

<Box display="flex" flexDirection="column" gap="100">
	<KeyboardShortcut hotkey="Mod+S" />
	<KeyboardShortcut hotkey="Mod+Shift+Z" />
	<KeyboardShortcut hotkey="Mod+Alt+H" />
	<KeyboardShortcut hotkey="Mod+Shift+Alt+H" />
</Box>

Inverted

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

Ctrl+SCtrl+S

<Box display="flex" gap="200" alignItems="center">
	<KeyboardShortcut hotkey="Mod+S" />
	<KeyboardShortcut hotkey="Mod+S" isInverted />
</Box>

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.

Heading 1 `Ctrl+S`

Heading 2 `Ctrl+S`

Heading 3 `Ctrl+S`

Heading 4 `Ctrl+S`

Heading 5 `Ctrl+S`

Heading 6 `Ctrl+S`

<Box display="flex" flexDirection="column" gap="100">
	<Heading level="1">
		Heading 1 <KeyboardShortcut hotkey="Mod+S" />
	</Heading>
	<Heading level="2">
		Heading 2 <KeyboardShortcut hotkey="Mod+S" />
	</Heading>
	<Heading level="3">
		Heading 3 <KeyboardShortcut hotkey="Mod+S" />
	</Heading>
	<Heading level="4">
		Heading 4 <KeyboardShortcut hotkey="Mod+S" />
	</Heading>
	<Heading level="5">
		Heading 5 <KeyboardShortcut hotkey="Mod+S" />
	</Heading>
	<Heading level="6">
		Heading 6 <KeyboardShortcut hotkey="Mod+S" />
	</Heading>
</Box>

Inline Usage

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

Press Ctrl+S to save your changes.

<Paragraph>
	Press <KeyboardShortcut hotkey="Mod+S" /> to save your changes.
</Paragraph>

Platform Override

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

macOS: ⇧⌘ZWindows: Ctrl+Shift+Z

<Box display="flex" flexDirection="column" gap="100">
	<Text>macOS: <KeyboardShortcut hotkey="Mod+Shift+Z" platform="mac" /></Text>
	<Text>Windows: <KeyboardShortcut hotkey="Mod+Shift+Z" platform="windows" /></Text>
</Box>

API

`PlumaKeyboardShortcut` `extends Text`

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

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

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

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

`fontStyle` `"italic" | "normal" | 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` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "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

Heading 1 Ctrl+S

Heading 2 Ctrl+S

Heading 3 Ctrl+S

Heading 4 Ctrl+S

Heading 5 Ctrl+S

Heading 6 Ctrl+S

PlumaKeyboardShortcut extends Text

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

family "mono" | "sans" | undefined

fontStyle "italic" | "normal" | undefined

hotkey Hotkey (required)

isInverted boolean | undefined

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

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

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

On this page

Heading 1 `Ctrl+S`

Heading 2 `Ctrl+S`

Heading 3 `Ctrl+S`

Heading 4 `Ctrl+S`

Heading 5 `Ctrl+S`

Heading 6 `Ctrl+S`

`PlumaKeyboardShortcut` `extends Text`

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

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

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

`hotkey` `Hotkey` (required)

`isInverted` `boolean | undefined`

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

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

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