Propel

Shortcut

Displays a keyboard shortcut hint, such as "⌘ K", as a decorative visual cue.

Show code
import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function BasicDemo() {
  return <Shortcut keys="⌘ K" />;
}

Installation

import { Shortcut } from "@makeplane/propel/components/shortcut";

Usage

import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function BasicDemo() {
  return <Shortcut keys="⌘ K" />;
}

Examples

Sizes

size sets the key-cap text: sm 11 px or md 12 px, which is the default. This is Shortcut’s own type scale, not the control ladder — a shortcut hint is a caption, not a control.

Show code
import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Shortcut keys="⌘ K" size="sm" />
      <Shortcut keys="⌘ K" size="md" />
    </div>
  );
}

Key combinations

The keys prop is free-form text, so any combination of symbols or key names renders as-is.

Show code
import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function KeyCombinationsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Shortcut keys="⌘ K" />
      <Shortcut keys="⌘ ⇧ P" />
      <Shortcut keys="⌘ Enter" />
      <Shortcut keys="Esc" />
    </div>
  );
}

In a button

Show code
import { Button } from "@makeplane/propel/components/button";
import { Shortcut } from "@makeplane/propel/components/shortcut";

export default function InAButtonDemo() {
  return (
    <Button
      label="Search"
      variant="secondary"
      size="sm"
      stretch="auto"
      icon={<Shortcut keys="⌘ K" size="sm" />}
      iconPosition="end"
    />
  );
}

API Reference

Shortcut

Public shortcut text slot. It is a visual hint by default; put the canonical `aria-keyshortcuts` value on the actionable item or trigger.

PropTypeDefaultDescription
keys(required)string—Keyboard shortcut text, e.g. `"⌘ K"`.
size"sm" | "md"—