components/keycap
Type Aliases
Section titled “Type Aliases”KeycapTone
Section titled “KeycapTone”KeycapTone =
"neutral"|"primary"|"accent"|"ink"|"destructive"
Molded key colors. ink is the dark key; destructive stays neutral until
hovered or focused; the rest follow the theme.
KeycapSize
Section titled “KeycapSize”KeycapSize =
"sm"|"md"|"lg"
Keycap sizes: a legend chip, a dock key and a big face key.
KeycapProps
Section titled “KeycapProps”KeycapProps =
HTMLAttributes<HTMLElement> > &object
Props accepted by Keycap.
Type Declaration
Section titled “Type Declaration”
optionaltone?:KeycapTone
optionalsize?:KeycapSize
pressed?
Section titled “pressed?”
optionalpressed?:boolean
Show the key held down. Presentation only; the host owns input.
KeycapButtonProps
Section titled “KeycapButtonProps”KeycapButtonProps =
Omit<ButtonHTMLAttributes<HTMLButtonElement>>,"children"> > &object
Props accepted by KeycapButton.
Type Declaration
Section titled “Type Declaration”label:
ReactNode
Visible name of the action, e.g. “Build”. null makes an icon-only key, which
then needs an aria-label.
shortcut?
Section titled “shortcut?”
optionalshortcut?:string
The keyboard key that runs the same action, shown as a small keycap.
optionalicon?:ReactNode
Decorative icon before the label.
readout?
Section titled “readout?”
optionalreadout?:ReactNode
Extra readout after the label, such as a PixelNumber count.
optionaltone?:KeycapTone
pressed?
Section titled “pressed?”
optionalpressed?:boolean
Toggle state for mode keys. undefined is a momentary key; a boolean adds
aria-pressed and lights the key’s indicator.
expanded?
Section titled “expanded?”
optionalexpanded?: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.
Variables
Section titled “Variables”Keycap
Section titled “Keycap”
constKeycap: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.
KeycapButton
Section titled “KeycapButton”
constKeycapButton: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.