Gallery
See what others have created
electedyardstick
@electedyardstick
Cancel
Design a cancel flow for an in-progress task in a product UI: a download, subscription change, setup step, or similar. Start with the live state showing the task in progress and a clear secondary cancel control.
When the user chooses cancel, show a confirmation state that spells out what stops now, what happens to saved progress, and whether the action can be undone. Keep the user's current context visible so the dialog or sheet feels tied to the thing being canceled, not a generic warning.
After confirmation, swap the UI into a finished or stopped state. If recovery is possible, surface an undo action immediately and keep it time-limited. If recovery is not possible, show the consequence plainly and offer the next best path, such as restarting, closing the flow, or returning to the previous screen.
What to deliver
- Design a cancel action for an in-progress flow.
- Show the confirmation step before the action is committed.
- Include the post-cancel state with clear next steps.
- Add an undo option where the action can be safely reversed.
- Handle the no-recovery case with a plain warning.
Highlight the cancellation button with a contrasting color to grab attention and prevent accidental actions.