<div className="flex flex-wrap items-center justify-center gap-6">
<ProgressFoldButton variant="primary">Publish</ProgressFoldButton>
<ProgressFoldButton variant="secondary">Save draft</ProgressFoldButton>
</div>

<div className="flex flex-wrap items-center justify-center gap-6">
<ProgressFoldButton status="loading">Uploading…</ProgressFoldButton>
<ProgressFoldButton status="loading" progress={60}>
  Exporting…
</ProgressFoldButton>
</div>

<div className="flex flex-wrap items-center justify-center gap-6">
<ProgressFoldButton size="sm">Small</ProgressFoldButton>
<ProgressFoldButton size="md">Medium</ProgressFoldButton>
<ProgressFoldButton size="lg">Large</ProgressFoldButton>
</div>

<ProgressFoldButton disabled>Publish</ProgressFoldButton>

Progress Fold Button

tsx

import { ProgressFoldButton } from "@/components/myndui/progress-fold-button";export function ProgressFoldButtonDemo() {return <ProgressFoldButton variant="primary">Publish</ProgressFoldButton>;}

Documentation

Learn Playground

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

Installation

pnpm dlx shadcn@latest add "https://myndui.design/r/progress-fold-button.json"

Usage

tsx

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

tsx

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

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.

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:

tsx

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

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

  async function handleClick() {
    setStatus("loading");
    setProgress(0);
    // …drive progress, then:
    setStatus("idle");
  }

  return (
    <ProgressFoldButton
      status={status}
      progress={status === "loading" ? progress : undefined}
      onClick={handleClick}
    >
      Publish
    </ProgressFoldButton>
  );
}

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary"`	`"primary"`	Front face color scheme
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button padding and text size
`status`	`"idle" \| "loading"`	`"idle"`	Fold open and show the progress bar while loading
`progress`	`number`	—	0–100; makes loading determinate (omit for indeterminate)