Skip to content
Statecraft

All patterns

  • Bulk Actions

    Let users perform one action across many records safely, with clear scope, eligibility and recovery.

    Data

  • Advanced Filters

    Help users narrow large datasets with filters they can see, edit, share and recover from.

    Data

  • Autosave

    Save changes continuously without a Save button, while keeping users certain their work is safe.

    Forms

  • Approval Workflow

    Route a request through one or more reviewers with clear status, accountability and an auditable history.

    Workflow

  • AI Response

    Present generated answers with streaming, sources, control and recovery, so users can trust and verify them.

    AI

  • File Upload

    Let users add files with visible progress, early validation and recovery that never loses what already uploaded.

    Files

  • Command Palette

    Give users one keyboard-first entry point to jump anywhere and run any action without hunting through menus.

    Navigation

  • Subscription Management

    Let customers upgrade, downgrade, change billing cycles and cancel with exact prices, dates and consequences shown before they confirm.

    Payments

  • Refunds

    Let support staff or customers return money with the exact amount, destination, timing and consequences stated before it's irreversible.

    Payments

  • Checkout

    Take a customer from plan choice to paid with the fewest fields, a total that never surprises, and errors that keep what they typed.

    Payments

  • Failed Payment Recovery

    Recover failed renewals with timely, specific prompts and a grace period, before customers lose access they still want.

    Payments

  • Usage & Limits

    Show customers how much of their plan they've used and handle the moment they hit a limit without breaking their work.

    Payments

  • App Sidebar

    Organise a product's main navigation so users always know where they are, reach frequent places in one click, and keep their place on small screens.

    Navigation

  • Tabs

    Split one object's content into peer views that users switch between without losing their place, state or URL.

    Navigation

  • Breadcrumbs & Back

    Show users where they are in a hierarchy and get them back to exactly where they came from — filters, scroll and all.

    Navigation

  • File Preview

    Let users look inside a file without downloading it, with a predictable fallback for every type the product can't render.

    Files

  • Attachments

    Attach files to records and comments with clear ownership, visibility and deletion rules that match the record they belong to.

    Files

  • CSV Import

    Bring spreadsheet data into the product with column mapping, row-level validation and a preview, so nothing is imported by surprise.

    Files

  • Confirmation

    Ask for confirmation only when an action is hard to undo, and make the dialog state exactly what will happen.

    Workflow

  • Partial Failure

    Report operations where some items succeed and some fail, so users know exactly what happened and what to do about the rest.

    Workflow

  • Permissions

    Show people what they can do, explain what they can't, and give them a way forward instead of a dead end.

    Workflow

  • Notifications

    Tell people about things that need them, in the right channel and at the right volume, without burying what matters.

    Workflow

  • Activity History

    Show who changed what and when on a record, in a timeline people can scan, filter and trust.

    Data

  • Empty States

    Design what users see when there's nothing to show, so every empty screen explains why and offers the next useful step.

    Data

  • Version History

    Let users see earlier versions of a document or record, compare them, and restore safely without losing current work.

    Forms

  • Human Review

    Put a person between AI output and real-world consequences, with review that's fast for good output and careful for risky output.

    AI

  • Feedback

    Collect quick, specific feedback on AI output that users actually give, and that the team can actually use.

    AI

  • Inline Validation

    Tell users about input problems at the right moment — not while they're still typing, and not only after they submit.

    Forms

  • Unsaved Changes

    Protect work in forms that save explicitly, warning only when something would actually be lost.

    Forms

  • Offline Mode

    Keep users working when the connection drops, with an honest view of what's synced, what's pending and what can't be done offline.

    Forms

  • Search

    Help users find records by what they remember — a name, a number, a phrase — with results that explain why they matched.

    Data

  • Pagination

    Split long lists into pages or progressive loads in a way that keeps position, counts and selection predictable.

    Data

  • Saved Views

    Let users save a combination of filters, sorting and columns as a named view they and their team can return to.

    Data

  • Comments

    Let people discuss work where it happens — on the record or the exact part of it — with mentions, threads and resolution.

    Workflow

  • Error Recovery

    When something fails, say what happened in plain language, protect the user's work, and offer the most useful next step.

    Workflow

  • Keyboard Shortcuts

    Give frequent users fast keyboard paths that are discoverable, consistent and never get in the way of typing.

    Navigation

  • Prompt Input

    Design the box where users ask AI for things — with context, attachments and controls visible — so prompts start strong and never get lost.

    AI

  • AI Suggestions

    Offer AI-generated values, completions and next steps inline, so users accept good ones in one action and ignore the rest at no cost.

    AI

  • Agent Progress

    Show what an AI agent is doing during long, multi-step tasks — steps, tool use and decisions — so users can follow, steer and stop it.

    AI

  • AI Onboarding

    Introduce an AI feature by showing what it can do with the user's own data, setting honest expectations about limits and privacy.

    AI

  • Export

    Let users take their data out in the format they need, with a clear scope and no surprises about what's included.

    Files

  • Sharing & Links

    Let people share files and records with teammates or outsiders, with access levels and link scope that are impossible to misread.

    Files

  • Storage Limits

    Show how much storage is used and by what, and handle a full quota without blocking work or deleting anything.

    Files
WorkflowFree

Confirmation

Ask for confirmation only when an action is hard to undo, and make the dialog state exactly what will happen.

6 states5 edge casesDesktop + Mobile

01The problem

Products confirm too much or too little. Confirming every action trains users to click “OK” without reading, so the one confirmation that matters gets ignored. Confirming nothing means a single misclick deletes a customer's data. The decision isn't “should we confirm?” but “can this be undone?”.

02When to use

Use when

  • Permanent deletion of data that can't be restored
  • Actions that notify or charge other people: sending, publishing, billing
  • Bulk actions on many records at once
  • Actions whose consequences aren't visible from where the user is

Avoid when

  • The action can be undone — offer Undo after it instead.
  • The action is frequent and low-risk, like archiving one email.
  • The user just configured exactly what will happen on the previous screen.

03Recommended UX

Statecraft recommendation

Prefer undo over confirmation. When an action truly can't be undone, use a dialog whose title names the action and object with counts, whose body states the consequence, and whose confirm button repeats the verb — “Delete 24 customers”, never “OK”.

Undo keeps the user moving and handles mistakes after the fact, which is when people actually notice them.

A specific title (“Delete 24 customers?”) is read; a generic one (“Are you sure?”) is dismissed by habit.

A button labelled with the verb lets users confirm without reading the body — and still know what they're agreeing to.

04Interaction flow

  1. 01

    User triggers action

    Delete, send, publish, bulk change.

  2. 02

    Reversible?

    Yes → act immediately and offer Undo.

  3. 03

    Irreversible → dialog

    Title, consequence, verb button; focus on Cancel for severe cases.

  4. 04

    High severity

    Type the name to confirm for workspace-level deletion.

  5. 05

    Execute

    Button shows progress; dialog closes on success.

  6. Result

    • Done
    • Undone
    • Cancelled

05Desktop behaviour

On desktop, confirmation is a small modal centred over the page. It should be readable in one glance and operable from the keyboard.

Desktop rules

  • Title: verb + count + object (“Delete 24 customers?”).
  • Body: one or two sentences of consequence — what's lost, who's affected, whether it can be recovered.
  • Buttons: Cancel and the destructive verb; destructive styling only on genuinely destructive actions.
  • Enter confirms only when focus is on the confirm button; Escape always cancels.
The title names the action and count, the body states what's lost, and the button repeats the verb. Focus starts on Cancel.

06Mobile behaviour

On mobile, confirmations work best as action sheets anchored to the bottom, where thumbs already are.

Mobile rules

  • Use a bottom sheet with the consequence text and stacked full-width buttons.
  • Put the destructive action first in red and Cancel separated below it.
  • Prefer undo toasts for swipe-to-delete gestures rather than a sheet on every swipe.
A bottom action sheet: consequence first, destructive action in red, Cancel separated below.

07States

  • Undo toast

    Action done; toast with Undo for 5–10 seconds.

  • Standard confirm

    Dialog with title, consequence and verb button.

  • Type to confirm

    For catastrophic actions; button enabled when the name matches.

  • Processing

    Confirm button shows progress; dialog can't be dismissed mid-request.

  • Failed

    Error shown inside the dialog with Retry; nothing changed.

  • Blocked

    The action isn't allowed yet — explain why instead of confirming.

08Edge cases

  1. EC-01

    Confirmation fatigue

    Users see a confirm dialog every time they archive a ticket.

    Recommendation

    Remove it, archive immediately and offer Undo. Save confirmations for actions that are actually irreversible.

  2. EC-02

    Consequences beyond the object

    Deleting a project also deletes 340 tasks and 12 integrations.

    Recommendation

    List the dependent data with counts in the body. Users can't weigh consequences they can't see.

  3. EC-03

    Blocked deletion

    A customer can't be deleted because they have unpaid invoices.

    Recommendation

    Don't show a confirm button at all. Explain the blocker and link to resolving it.

  4. EC-04

    Accidental double-click

    The user double-clicks Delete; the second click lands on the dialog's confirm button.

    Recommendation

    Put initial focus on Cancel for destructive dialogs and ignore clicks within ~300 ms of opening.

  5. EC-05

    Undo after navigation

    The user deletes an item and immediately navigates away before seeing the toast.

    Recommendation

    Keep the undo toast alive across in-app navigation for its full duration, or offer restore from trash.

09Microcopy

  • Title

    Avoid

    “Are you sure?”

    Prefer

    “Delete 24 customers?”

  • Body

    Avoid

    “This action cannot be undone.”

    Prefer

    “Their 312 invoices and contact history will be permanently deleted.”

  • Confirm button

    Avoid

    “OK”

    Prefer

    “Delete 24 customers”

  • Type to confirm

    Prefer

    “Type acme-production to confirm”

  • Undo toast

    Prefer

    “Ticket archived. Undo”

10Accessibility

  • Use role="alertdialog" with aria-labelledby (title) and aria-describedby (consequence).
  • Trap focus inside the dialog and return it to the triggering control on close.
  • Initial focus on Cancel for destructive actions, on the primary button otherwise.
  • Undo toasts must stay long enough to reach by keyboard and pause while focused or hovered.

11Developer notes

  1. 01

    Implement deletion as soft delete with a restore window wherever possible; it makes Undo nearly free.

  2. 02

    Generate dialog copy from the action and the actual counts returned by the server, not hardcoded strings.

  3. 03

    Check whether the action is blocked before opening the dialog.

  4. 04

    Make the confirmed request idempotent so a retry can't apply the action twice.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement a confirmation system for destructive and irreversible actions.

Requirements:
- Decide per action: reversible → execute immediately with an Undo toast (soft delete); irreversible → confirmation dialog.
- Reusable dialog: title = verb + count + object, body = concrete consequence with dependent data counts, buttons = Cancel + verb ("Delete 24 customers").
- Destructive styling only for destructive actions; initial focus on Cancel for them; ignore clicks within 300 ms of opening.
- Type-to-confirm variant for catastrophic actions (workspace/project deletion).
- Processing state on the confirm button; errors shown inside the dialog with Retry.
- Check blockers before opening; show an explanation instead of a confirm button when blocked.
- role="alertdialog" with labelled title and description; focus trap; focus returns to the trigger.
- Undo toast persists across in-app navigation and pauses on hover/focus.
- Mobile: bottom action sheet with stacked full-width buttons.

Do not redesign the existing interface.