Corner 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 CornerButton from "./CornerButton";

export default function Example() {
  return (
    <CornerButton
      children={"Explore the details"}
      color={"#d9ba94"}
      background={"#29221e"}
      inkColor={"#f2e4d2"}
      disabled={false}
    />
  );
}

Using Corner Button

Supply an action label through children and connect onClick to the intended action. Use type to control its behaviour inside a form.

The active prop lets you show the highlighted treatment independently of hover. Use disabled when the action is unavailable.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Button content.
color	string	No	"#dcc7ab"	Corner and expanded fill colour.
background	string	No	"#242021"	Initial background and expanded text colour.
inkColor	string	No	"#f0e6d9"	Initial label colour.
active	boolean	No	false	Optional forced expanded appearance; hover and focus also expand the fill.
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.