Inline confirm action

Buttons

About

An archive button expands into an inline confirmation with cancellation and undo.

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

Code

How Inline confirm action is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import * as React from "react";
import Component, { type Props, type State } from "@/components/ui/inline-confirm-action";
const settings = {"title": "Archive draft", "showContext": true};
const ease=(x:number)=>{x=Math.max(0,Math.min(1,x));return x*x*(3-2*x)};
const pulse=(t:number,a:number,b:number)=>ease((t-a)/.3)*(1-ease((t-b)/.3));
export function showcase(time:number):State{const t=((time%6)+6)%6;return {active:t<.8?0:t<2.5?1:t<4.9?2:0,reveal:ease((t-.8)/.22)};}
export default function Demo(props: any = {}) {
 const {showcaseTime,...incoming}=props;const merged={...settings,...incoming};
 return <div style={{width:"100%",minWidth:0}}><Component {...merged} state={showcaseTime===undefined?incoming.state:showcase(showcaseTime)} seeking={showcaseTime!==undefined||incoming.seeking}/></div>;
}