Hotkey

Displays a keyboard key or shortcut, such as a single key or a combination of modifier keys.

Default

A single literal key rendered via children.

K

tsx

<Hotkey>K</Hotkey>

Installation

tsx

import { Hotkey } from "madagent";

Modifiers

Pass one or more HotkeyKey values via the keys prop to render modifier symbols before the label. A single key can be a string; multiple keys use an array.

⌘K⇧⌘Z⌃⌥Del⌥⌘D⊞L

tsx

<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
  <Hotkey keys="command">K</Hotkey>
  <Hotkey keys={["shift", "command"]}>Z</Hotkey>
  <Hotkey keys={["ctrl", "alt"]}>Del</Hotkey>
  <Hotkey keys={["option", "command"]}>D</Hotkey>
  <Hotkey keys="win">L</Hotkey>
</div>

Navigation Keys

Directional and navigation keys render as directional glyphs (arrows, page up/down, home/end). These are never mirrored in RTL layouts, since they represent physical keyboard positions rather than inline text direction.

↑↓←→⇞⇟⇱⇲

tsx

<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
  <Hotkey keys="up" />
  <Hotkey keys="down" />
  <Hotkey keys="left" />
  <Hotkey keys="right" />
  <Hotkey keys="pageup" />
  <Hotkey keys="pagedown" />
  <Hotkey keys="home" />
  <Hotkey keys="end" />
</div>

Variants

solid (default) renders a raised keycap look; muted renders a flat, subtle surface.

⌘K⌘K

tsx

<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
  <Hotkey variant="solid" keys="command">K</Hotkey>
  <Hotkey variant="muted" keys="command">K</Hotkey>
</div>

Inline Usage

Hotkey is an inline element, so it composes naturally inside a sentence describing a shortcut.

Press ⌘K to open the command palette. Undo with ⌘Z, or redo with ⇧⌘Z.

tsx

<p>
  Press <Hotkey keys="command">K</Hotkey> to open the command palette. Undo with{" "}
  <Hotkey keys="command">Z</Hotkey>, or redo with <Hotkey keys={["shift", "command"]}>Z</Hotkey>.
</p>

API Reference

Prop	Type	Default	Description
`keys`	`HotkeyKeyHotkeyKey[]`	-	Modifier/special key(s) rendered as symbols before the label
`variant`	`"solid""muted"`	`"solid"`	Visual style variant — solid renders a raised keycap look, muted renders a flat subtle surface
`children`	`ReactNode`	-	Literal key label, e.g. "K", rendered after the key symbol(s)

Key Reference

The HotkeyKey type covers modifier keys and special/navigation keys. Each renders as a symbol inside an <abbr> element with a descriptive title for accessibility.

Key	Preview	Title
`command`	`⌘`	Command
`shift`	`⇧`	Shift
`ctrl`	`⌃`	Control
`option`	`⌥`	Option
`alt`	`⌥`	Alt
`win`	`⊞`	Windows
`fn`	`fn`	Function
`enter`	`↵`	Enter
`delete`	`⌫`	Delete
`escape`	`⎋`	Escape
`tab`	`⇥`	Tab
`space`	`␣`	Space
`capslock`	`⇪`	Caps Lock
`help`	`?`	Help
`up`	`↑`	Up
`down`	`↓`	Down
`left`	`←`	Left
`right`	`→`	Right
`pageup`	`⇞`	Page Up
`pagedown`	`⇟`	Page Down
`home`	`⇱`	Home
`end`	`⇲`	End

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

اضغط على ⌘K لفتح لوحة الأوامر. تراجع باستخدام ⌘Z، أو أعد باستخدام ⇧⌘Z.

Usage

tsx

<p dir="rtl">
  اضغط على <Hotkey keys="command">K</Hotkey> لفتح لوحة الأوامر. تراجع باستخدام{" "}
  <Hotkey keys="command">Z</Hotkey>، أو أعد باستخدام <Hotkey keys={["shift", "command"]}>Z</Hotkey>.
</p>

<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}> <Hotkey keys="command">K</Hotkey> <Hotkey keys={["shift", "command"]}>Z</Hotkey> <Hotkey keys={["ctrl", "alt"]}>Del</Hotkey> <Hotkey keys={["option", "command"]}>D</Hotkey> <Hotkey keys="win">L</Hotkey> </div>

<div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}> <Hotkey keys="up" /> <Hotkey keys="down" /> <Hotkey keys="left" /> <Hotkey keys="right" /> <Hotkey keys="pageup" /> <Hotkey keys="pagedown" /> <Hotkey keys="home" /> <Hotkey keys="end" /> </div>