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
FilesFree

Export

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

6 states5 edge casesDesktop + Mobile

01The problem

Users export to share with finance, analyse in a spreadsheet, or leave for another tool. The export button usually hides the hard questions: does it include the filtered rows or everything? Which columns? What about the 50,000-row case that times out? A file that silently contains the wrong rows is worse than no export at all.

02When to use

Use when

  • Tables and lists users analyse elsewhere
  • Reports that need to be shared outside the product
  • Account-level data portability

Avoid when

  • Users need a live connection to the data — offer an integration or API instead.
  • The data is a single record — use print or share instead.

03Recommended UX

Statecraft recommendation

Make the export scope explicit before the file is created — “42 filtered invoices” or “All 1,284 invoices” — let users choose columns and format in one small dialog, and move exports above a size threshold to a background job that notifies when the file is ready.

Stating the scope with a count prevents the most common export complaint: “this isn't the data I was looking at”.

Defaulting to the visible columns matches what users see; offering “all fields” covers analysis needs.

Large exports that block the browser fail on slow connections. A background job with a download link is reliable.

04Interaction flow

  1. 01

    Click Export

    From the list toolbar or selection toolbar.

  2. 02

    Choose scope

    Selected, filtered, or all — each with a count.

  3. 03

    Choose format and columns

    CSV, Excel, PDF; visible or all columns.

  4. 04

    Generate

    Small: immediate download. Large: background job.

  5. Result

    • Downloaded
    • Ready by email
    • Failed

05Desktop behaviour

On desktop, export opens a compact dialog with scope, format and columns, then downloads directly or hands off to a background job.

Desktop rules

  • Scope options with counts: Selected (3) · Current view (42) · All invoices (1,284).
  • Default to the current view and visible columns.
  • Above ~10,000 rows, say it will be emailed and continue in the background.
  • Name files descriptively: invoices-overdue-2026-11-01.csv.
Scope is stated with counts before anything is generated; large exports continue in the background.

06Mobile behaviour

On mobile, exports are usually for sharing. Keep options minimal and hand the file to the share sheet.

Mobile rules

  • One sheet: scope and format, with sensible defaults.
  • Small files open the native share sheet; large ones are emailed.
  • Skip column selection on mobile — use the current view.
One sheet with sensible defaults; small files go straight to the native share sheet.

07States

  • Choosing

    Dialog with scope, format and columns.

  • Generating

    Immediate exports show progress in the button.

  • Queued

    Background job; user can leave; notified on completion.

  • Ready

    Download link with expiry date.

  • Expired

    Link expired; one-click regenerate.

  • Failed

    Reason and Retry; partial files never delivered as complete.

08Edge cases

  1. EC-01

    Filtered vs all

    The user filtered to 42 rows and clicks Export.

    Recommendation

    Default to the 42, state it with the count, and offer “All 1,284” as an explicit alternative.

  2. EC-02

    Formula injection

    A customer name starts with “=HYPERLINK(…)”.

    Recommendation

    Prefix cells starting with = + - @ so spreadsheet apps treat them as text.

  3. EC-03

    Permissions

    A member exports data including fields they can't see in the UI.

    Recommendation

    Exports apply the same field and row permissions as the interface; log every export.

  4. EC-04

    Dates and numbers

    A European user opens the CSV in Excel and dates are swapped.

    Recommendation

    Use ISO dates (2026-11-01) and plain numbers without currency symbols in CSV; offer Excel format for formatted output.

  5. EC-05

    Huge exports

    An admin exports 2 million activity rows.

    Recommendation

    Run in the background, split into multiple files or a zip, and email a time-limited link.

09Microcopy

  • Scope

    Avoid

    “Export data”

    Prefer

    “Export 42 invoices in Overdue view”

  • Background

    Prefer

    “This is a large export. We’ll email you a download link, usually within 5 minutes.”

  • Ready

    Prefer

    “Your export is ready · invoices-2026-11-01.csv · link expires in 7 days”

  • Failed

    Avoid

    “Export failed”

    Prefer

    “The export didn’t finish. Nothing was sent. Retry”

10Accessibility

  • Scope and format are radio groups with counts in the labels.
  • Background export status is announced and also delivered by email/notification.
  • Exported spreadsheets include header rows with human-readable column names.

11Developer notes

  1. 01

    Generate exports from the same query that renders the view, including filters and permissions.

  2. 02

    Stream large exports to storage in a background job; deliver via signed, expiring URLs.

  3. 03

    Escape formula-leading characters in CSV output.

  4. 04

    Log export events (who, scope, row count) for audit.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement data export for list views.

Requirements:
- Export dialog: scope (Selected / Current view / All) with counts, format (CSV, Excel), columns (visible / all).
- Same query, filters and permissions as the view; audit log per export.
- Small exports download immediately; above a threshold, background job + notification/email with a signed expiring link.
- Descriptive filenames with view name and date.
- CSV: ISO dates, plain numbers, formula-prefix escaping; header row with readable names.
- States: generating, queued, ready (with expiry), expired (regenerate), failed (retry, never partial-as-complete).
- Mobile: single sheet with defaults; native share sheet for small files.

Do not redesign the existing interface.