Docs
→
Button
→
Backup Button

Backup Button

A stateful button with animated loader that transitions through backup, backing-up, and done states.

by Sarthak Kapila

Installation

Usage

Backup Button Example

1import BackupButton from "@/components/backup-button";
2

3export default function Example() {
4  const handleBackupClick = () => {
5    console.log("Backup initiated!");
6  };
7

8  return <BackupButton onClick={handleBackupClick} />;
9}

Understanding the component

On click, the button animates to a loading state showing a circular spinner and then a check mark, before briefly entering the done state and resetting to the initial backup state. All animations are driven by Framer Motion.

Credits

By Sarthak Kapila.

Props

PropTypeDefaultDescription
variant"backup" | "backing-up" | "done""backup"Initial visual state. Click transitions to loading then done automatically.
onClick() => void-Callback invoked on click (runs in addition to internal transitions).
classNamestring-Optional class name on the button.
styleReact.CSSProperties-Inline styles for the button.