Destructive Action Flow
A complete delete flow with confirmation, loading, success, and failure handling.
Problem this solves
Destructive actions are the highest-risk interactions in any admin interface. A single misclick can delete data permanently. This flow demonstrates the full lifecycle: confirmation with typed input, loading state during deletion, success feedback, and graceful failure handling — all with disabled states to prevent double-submission.
Use this pattern for any irreversible action: deleting projects, revoking API keys, removing team members, canceling subscriptions. The typed confirmation prevents accidental deletions of critical resources.
Interactive demo
Click "Delete" on any project to start the flow.
Marketing Dashboard
5 members
Active
Internal Wiki
12 members
Active
Analytics Pipeline
3 members
Paused
Decision logic
| Phase | UI behavior | Safety mechanism |
|---|---|---|
| Idle | Delete buttons enabled | No action in progress |
| Confirm | Modal with typed confirmation | Must type exact name to proceed |
| Deleting | Spinner overlay, all inputs disabled | Prevents double-submission |
| Success | Item removed, success banner | Auto-dismiss after 3s |
| Failure | Error banner with retry option | Data unchanged, can retry |