Progress Fold Button

A 3D button whose front face folds back to reveal a controlled progress bar while loading.

The front face folds back on hover, revealing the layers behind it. Set status="loading" to hold the fold open and run a progress bar — controlled by you, like the Magic Input.

Loading

status and progress are fully controlled. While status="loading" the front face folds open and a progress bar runs behind it — determinate when you pass progress, otherwise an indeterminate segment sweeps across. Back to idle and the front folds flat again.

Wire it up by flipping status from your handler:

import * as React from "react";
import { ProgressFoldButton } from "@/components/godui/progress-fold-button";

export function Example() {
  const [status, setStatus] = React.useState<"idle" | "loading">("idle");

  const handleClick = async () => {
    setStatus("loading");
    await doWork();
    setStatus("idle");
  };

  return (
    <ProgressFoldButton status={status} onClick={handleClick}>
      Submit
    </ProgressFoldButton>
  );
}

Installation

pnpm dlx shadcn@latest add @godui/progress-fold-button

Requires the @godui namespace in your components.json (one-time setup):

{  "registries": {    "@godui": "https://godui.design/r/{name}.json"  }}

Usage

import { ProgressFoldButton } from "@/components/godui/progress-fold-button";

<ProgressFoldButton status="loading" progress={40}>
  Submit
</ProgressFoldButton>

Examples

Sizes

Disabled

Props

Accepts all native <button> attributes.

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary"`	`"primary"`	Theme color scheme of the front face
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size
`status`	`"idle" \| "loading"`	`"idle"`	Loading lifecycle; `"loading"` folds open and runs the bar
`progress`	`number`	—	0–100; makes `loading` determinate (omit for indeterminate)
`children`	`ReactNode`	—	Button label
`disabled`	`boolean`	`false`	Disable the button and its animations
`onClick`	`(e) => void`	—	Fires on click; flip `status` from here to start loading