Save Changes Toast

Buttons 557

About

Clerk.dev save changes toast

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Save Changes Toast to your project and fits it to your theme.

Code

How Save Changes Toast is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { useState } from "react"
import { ToastSave } from "@/components/ui/toast-save"

function ToastSaveDemo() {
  const [state, setState] = useState<"initial" | "loading" | "success">("initial")

  const handleSave = () => {
    setState("loading")
    setTimeout(() => {
      setState("success")
      setTimeout(() => {
        setState("initial")
      }, 2000)
    }, 2000)
  }

  const handleReset = () => {
    setState("initial")
  }

  return (
    <div className="flex items-center justify-center p-6">
      <ToastSave
        state={state}
        onSave={handleSave}
        onReset={handleReset}
      />
    </div>
  )
}

export { ToastSaveDemo }