Button

Overview

Extrude Button is a highly customizable 3D button component that brings depth and interactivity to your user interface. It supports various animations, materials, and styling options.

Usage

import { ExtrudeButton } from 'extrude-ui';

function MyComponent() {
  return (
    <ExtrudeButton
      text="Click Me!"
      size="medium"
      color="#4CAF50"
      depth={1.5}
      hover={true}
    />
  );
}

Examples:

Shiny Rounded Button

Pill Button

Gradient Button

Props

Core Props

Prop	Type	Default	Description
text	string	—	The text content of the button
onClick	() => void	—	Function called when button is clicked
disabled	boolean	false	Whether the button is disabled

Styling Props

Prop	Type	Default	Description
color	string	"#ffffff"	Primary color of the button
size	'small' | 'medium' | 'large' | 'xlarge'	"medium"	Size of the button
shape	'rounded' | 'square' | 'pill'	"rounded"	Shape of the button
font	string	—	Custom font family
textColor	string	"#000000"	Color of the button text
opacity	number	1	Overall opacity of the button

3D Properties

Prop	Type	Default	Description
depth	number	1	Depth of the button

Material Properties

Prop	Type	Default	Description
metalness	number	0	Metallic material effect
roughness	number	0.5	Surface roughness

Animation Properties

Prop	Type	Default	Description
animation	'spin' | 'flip' | 'rock' | 'none'	"spin"	onClick animation

Shadow Properties

Prop	Type	Default	Description
shadowColor	string	"#000000"	Color of the shadow
shadowOpacity	number	0.2	Opacity of the shadow (0-1)

Gradient Properties

Prop	Type	Description
gradient	{ from: string; to: string; angle?: number }	Configure a gradient background

Loading State

Prop	Type	Default	Description
fallback	React.ReactNode	—	Overrides the default loading animation.
loadingAnimation	'spinner' | 'pulse' | 'dots' | 'none'	"spinner"	Type of loading animation
loadingColor	string	—	Color of the loading indicator

Code From Examples:

Shiny Rounded Button

<ExtrudeButton
  text="Click Me!"
  size="medium"
  color="#4CAF50"
  depth={3}
  animation="flip"
  metalness={1}
  roughness={.1}
/>

Pill Button

<ExtrudeButton
  text="Click Me!"
  shape="pill"
  animation="spin"
  depth={5}
  opacity={0.5}

/>

Gradient Button

<ExtrudeButton
  text="Gradient"
  animation="rock"
  gradient={{
    from: "#7f2dfd",
    to: "#f203ff",
    angle: 18
  }}
/>