Shortcut

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

Basic

Show code

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

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

Magnitudes

Show code

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

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Shortcut keys="⌘ K" magnitude="sm" />
      <Shortcut keys="⌘ K" magnitude="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"
      prominence="secondary"
      tone="neutral"
      magnitude="md"
      sizing="hug"
      endIcon={<Shortcut keys="⌘ K" magnitude="sm" />}
    />
  );
}

Installation

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

Props

Shortcut

Prop	Type	Required	Description
magnitude	"sm" \| "md"	No
keys	string	Yes	Keyboard shortcut text, e.g. `"⌘ K"`.