Cloff UI

Interactive Button

Multipurpose stateful Interactive button

npx shadcn@latest add https://ui.cloffstudio.com/r/interactive-button.json

Props	Type	Default	Description
`children`	`React.ReactNode`	`Enter`	Button lable show in the idle state.
`className`	`string`	`undefined`	Additional CSS classes applied to the button wrapper.
`onClick`	`(event: MouseEvent<HTMLButtonElement>) => void \| Promise<void>`	`undefined`	Click handler (can be async). If it throws/rejects the button goes to failure
`loadingText`	`string`	`Loading...`	Text shown while in loading state.
`loadingText`	`string`	`Loading...`	Text shown while in loading state.
`successText`	`string`	`Sucess!`	Text shown when action succeeds.
`failureText`	`string`	`Failed!!`	Text shown when action failed.
`loadingDuration`	`number (ms)`	`1500`	Delay (ms) after starting loading before switching to success (applied after onClick resolves).
`resetDelay`	`number (ms)`	`3000`	Time (ms) the button stays in success or failure before returning to idle.
`enableEnterKey`	`boolean`	`false`	If true, pressing Enter triggers the button when state is idle
`type`	`"button" \| "submit" \| "reset"`	`button`	Native button type attribute.
`form`	`string`	`undefined`	Forwarded form attribute (form id).
`name`	`string`	`undefined`	Forwarded name attribute.
`value`	`string`	`undefined`	Forwarded value attribute.