Keycap Button React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import KeycapButton from "./KeycapButton";

export default function Example() {
  return (
    <KeycapButton
      children={"Create"}
      hint={"↵"}
      color={"#ded7cb"}
      baseColor={"#8e8275"}
      inkColor={"#37302b"}
      depth={7}
      disabled={false}
      style={{
        "fontSize": 17
      }}
    />
  );
}

Using Keycap Button

Use a concise action label in children and an optional hint for supporting text. Connect onClick to the action.

depth changes how far the key appears raised above its base. Use type explicitly when placing the button inside a form.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Button content.
hint	ReactNode	No	undefined	Optional visual key hint. This does not register a keyboard shortcut.
color	string	No	"#ddd6ca"	Keycap surface colour.
baseColor	string	No	"#867c73"	Keycap base colour.
inkColor	string	No	"#37312e"	Inherited label colour.
depth	number	No	7	Unpressed travel height in pixels.
pressed	boolean	No	false	Optional visual pressed state; native pointer and keyboard pressing also work.
disabled	boolean	No	false	Native disabled state.
type	string	No	"button"	Native button type: button, submit, or reset.
onClick	function	No	undefined	Native click handler. Other native button and accessibility props are forwarded.
className	string	No	""	Additional classes merged with component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.