Keycap

TS

import { … } from "@fungi.computer/caps/components/keycap";

Hero

TSX

import { Keycap, KeycapButton } from "@fungi.computer/caps/components/keycap";

export default function Hero() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <span className="flex items-center gap-1">
        <Keycap>Ctrl</Keycap>
        <Keycap>K</Keycap>
      </span>
      <KeycapButton label="Jump" shortcut="Space" tone="primary" />
    </div>
  );
}

Tones

TSX

import { Keycap } from "@fungi.computer/caps/components/keycap";

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Keycap tone="neutral">Esc</Keycap>
      <Keycap tone="primary">Enter</Keycap>
      <Keycap tone="accent">Tab</Keycap>
      <Keycap tone="inverse">Shift</Keycap>
      <Keycap tone="destructive">Del</Keycap>
    </div>
  );
}

Mode key

TSX

import { useState } from "react";
import { KeycapButton } from "@fungi.computer/caps/components/keycap";

export default function ModeKey() {
  const [sprint, setSprint] = useState(false);
  return (
    <KeycapButton
      label="Sprint"
      onClick={() => {
        setSprint((value) => !value);
      }}
      pressed={sprint}
      shortcut="Shift"
    />
  );
}

Props

KeycapProps

Prop	Type	Description
tone?	"neutral" | "primary" | "accent" | "inverse" | "destructive"
size?	"sm" | "md" | "lg"
pressed?	boolean	Show the key held down. Presentation only; the host owns input.

• tone?"neutral" | "primary" | "accent" | "inverse" | "destructive"
• size?"sm" | "md" | "lg"
• pressed?boolean

  Show the key held down. Presentation only; the host owns input.

KeycapButtonProps

Prop	Type	Description
label	ReactNode	Visible name of the action, e.g. "Build". null makes an icon-only key, which then needs an aria-label.
shortcut?	string	The keyboard key that runs the same action, shown as a small keycap.
icon?	ReactNode	Decorative icon before the label.
readout?	ReactNode	Extra readout after the label, such as a PixelNumber count.
tone?	"neutral" | "primary" | "accent" | "inverse" | "destructive"
pressed?	boolean	Toggle state for mode keys. undefined is a momentary key; a boolean adds aria-pressed and lights the key's indicator.
expanded?	boolean	Disclosure state for keys that open a palette or window. A boolean adds aria-expanded and lights the lamp; use it instead of pressed for menus.

• labelReactNode

  Visible name of the action, e.g. "Build". null makes an icon-only key, which then needs an aria-label.

• shortcut?string

  The keyboard key that runs the same action, shown as a small keycap.

• icon?ReactNode

  Decorative icon before the label.

• readout?ReactNode

  Extra readout after the label, such as a PixelNumber count.

• tone?"neutral" | "primary" | "accent" | "inverse" | "destructive"
• pressed?boolean

  Toggle state for mode keys. undefined is a momentary key; a boolean adds aria-pressed and lights the key's indicator.

• expanded?boolean

  Disclosure state for keys that open a palette or window. A boolean adds aria-expanded and lights the lamp; use it instead of pressed for menus.

Full types: API reference.