Stamp 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 StampButton from "./StampButton";

export default function Example() {
  return (
    <StampButton
      children={"Make your mark"}
      color={"#c7755d"}
      background={"#231917"}
      disabled={false}
    />
  );
}

Using Stamp Button

Pass the action label through children and connect onClick to your action. Use type="submit" when placing the button inside a form.

The imprint replays on pointer and keyboard activation. Choose an ink colour with sufficient contrast against the face, and use disabled while an action is unavailable.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Button label or icon.
color	string	No	"#c7755d"	Ink, border and focus colour.
background	string	No	"#231917"	Button face colour.
disabled	boolean	No	false	Disable interaction.
type	"button" \| "submit" \| "reset"	No	"button"	Native button type.
onClick	function	No	undefined	Native click callback.
...rest	ButtonHTMLAttributes	No	undefined	Other native button attributes, including aria-label and form.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.