Stateful Button

Button component with built-in state visualizations.

Installation

Default behavior of the button

1<StatefulButton>Deploy</StatefulButton>

Progress feedback using loading state.

1<StatefulButton state="loading" loadingText="Processing" />

Success feedback using success state.

1<StatefulButton state="success" successText="Done" />

Error feedback using error state.

1<StatefulButton state="error" errorText="Error" />

Warning feedback using warning state.

1<StatefulButton state="warning" warningText="Warning" />

Prop	Type	Default	Description
children	React.ReactNode	—	Content rendered in the default state (text, icons, etc.).
className	string	—	Utility classes for fine-tuning spacing, color, or layout.
size	'default' \| 'sm' \| 'lg' \| 'icon'	default	Preset size variants that adjust height, padding, and gap.
state	'default' \| 'loading' \| 'success' \| 'error' \| 'disabled' \| 'warning'	default	Controls gradient theme, motion feedback, and overrides button content.
loadingText	string	Loading	Message displayed while in the loading state.
successText	string	Success	Message displayed while in the success state.
errorText	string	Error	Message displayed while in the error state.
warningText	string	Warning	Message displayed while in the warning state.
...props	MotionProps & React.ButtonHTMLAttributes<HTMLButtonElement>	—	All extra motion and native button attributes, including disabled.