Skip to content
Caps0.4.0
API reference

components/keycap

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/keycap";

Exports

Section titled “Exports”
Kind Export Description
type alias KeycapTone Molded key colors. inverse is the contrasting key; destructive stays neutral until hovered or focused; the rest follow the theme.
type alias KeycapSize Keycap sizes: a legend chip, a dock key and a big face key.
type alias KeycapProps Props accepted by Keycap.
type alias KeycapButtonProps Props accepted by KeycapButton.
constant Keycap One molded key legend, rendered as native <kbd>: the key a player presses. The key sits on its own travel so pressed and resting keys take the same room.
constant KeycapButton A chunky action key for game docks and toy panels. The host owns the action and the keyboard binding; shortcut only labels it.

KeycapTonetype alias

Section titled “KeycapTone”
Signature
type KeycapTone = "neutral" | "primary" | "accent" | "inverse" | "destructive";

Molded key colors. inverse is the contrasting key; destructive stays neutral until hovered or focused; the rest follow the theme.

KeycapSizetype alias

Section titled “KeycapSize”
Signature
type KeycapSize = "sm" | "md" | "lg";

Keycap sizes: a legend chip, a dock key and a big face key.

KeycapPropstype alias

Section titled “KeycapProps”
Signature
type KeycapProps = HTMLAttributes<HTMLElement> & object;

Props accepted by Keycap.

Type Declaration

Section titled “Type Declaration”
Name Type Description
tone? KeycapTone -
size? KeycapSize -
pressed? boolean Show the key held down. Presentation only; the host owns input.

KeycapButtonPropstype alias

Section titled “KeycapButtonProps”
Signature
type KeycapButtonProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  "children"
> &
  object;

Props accepted by KeycapButton.

Type Declaration

Section titled “Type Declaration”
Name 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? KeycapTone -
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.

Keycapconstant

Section titled “Keycap”
Signature
const Keycap: ForwardRefExoticComponent<
  HTMLAttributes<HTMLElement> & object & RefAttributes<HTMLElement>
>;

One molded key legend, rendered as native <kbd>: the key a player presses. The key sits on its own travel so pressed and resting keys take the same room.

KeycapButtonconstant

Section titled “KeycapButton”
Signature
const KeycapButton: ForwardRefExoticComponent<
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> &
    object &
    RefAttributes<HTMLButtonElement>
>;

A chunky action key for game docks and toy panels. The host owns the action and the keyboard binding; shortcut only labels it.