Shutter 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 ShutterButton from "./ShutterButton";

export default function Example() {
  return (
    <ShutterButton
      children={"Explore the collection"}
      color={"#d9bda5"}
      background={"#27211d"}
      textColor={"#f3e7dc"}
      activeTextColor={"#26201b"}
      shutters={6}
      disabled={false}
    />
  );
}

Using Shutter Button

Pass a meaningful action label through children and wire onClick to your action. The shutter effect also responds to keyboard focus.

Set textColor and activeTextColor for their respective surfaces. Use type="submit" for form actions and disabled when the action is unavailable.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Action label or custom content.
color	string	No	"#d9bda5"	Shutter fill and focus colour.
background	string	No	"#27211d"	Resting background colour.
textColor	string	No	"#f3e7dc"	Resting text colour.
activeTextColor	string	No	"#26201b"	Text colour over the shutter fill.
shutters	number	No	6	Number of animated panels, from 2 to 12.
disabled	boolean	No	false	Disable the native button.
onClick	function	No	undefined	Native click handler.
type	"button" \| "submit" \| "reset"	No	"button"	Native button type.
...rest	ButtonHTMLAttributes	No	undefined	Additional native attributes such as aria-label and form.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.