Skip to component
GGamma

Action status button

One action that moves through saving, success, and retryable error states.

New
Live previewUse keyboard to interact

Implementation

1"use client";2 3import { useEffect, useRef, useState } from "react";4import { Check, X } from "lucide-react";5 6export type ActionStatusButtonProps = {7  onAction: () => Promise<unknown> | unknown;8  idleLabel?: string;9  loadingLabel?: string;10  successLabel?: string;11  errorLabel?: string;12  resetDelay?: number;13};14 15type ActionState = "idle" | "loading" | "success" | "error";16 17/** One action with progress, success, and retryable error feedback. */18export function ActionStatusButton({19  onAction,20  idleLabel = "Save changes",21  loadingLabel = "Saving…",22  successLabel = "Saved",23  errorLabel = "Try again",24  resetDelay = 2200,25}: ActionStatusButtonProps) {26  const [state, setState] = useState<ActionState>("idle");27  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);28