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
NavigationFree

Tabs

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

6 states5 edge casesDesktop + Mobile

01The problem

Record pages grow: overview, activity, files, settings, billing. Showing everything on one page buries the important parts; splitting into separate pages loses context. Tabs solve this only when they behave predictably — the URL reflects the tab, state survives switching, and the tabs don't overflow off-screen.

02When to use

Use when

  • Detail pages with several distinct views of the same object
  • Settings areas with clearly separate sections
  • Switching between peer views of the same data (List / Board / Calendar)

Avoid when

  • Content users need to compare side by side — tabs hide one view while showing another.
  • Sequential steps — use a stepper, which communicates order and progress.
  • More than ~6 sections — use a sidebar or a settings index page.

03Recommended UX

Statecraft recommendation

Use tabs only for peer views of one object, reflect the active tab in the URL, and keep each tab's state — scroll, filters, unsaved input — when users switch away and back. Never put actions that affect the whole object inside one tab.

Users share links to “the Activity tab of this invoice”. If the URL doesn't encode the tab, the link lands on the wrong view and Back doesn't work.

Switching tabs is exploratory. Losing filters or a half-typed comment on every switch teaches users not to explore.

Object-wide actions (Edit, Delete, Share) belong in the object header above the tabs, visible from every tab.

04Interaction flow

  1. 01

    Object header

    Title, status and object-wide actions.

  2. 02

    Tab bar

    Default tab selected; URL reflects it.

  3. 03

    Switch tab

    Content swaps; header and scroll position of tab bar stay.

  4. 04

    Return to a tab

    Its filters, scroll and drafts are restored.

  5. Result

    • Viewing tab
    • Shared deep link

05Desktop behaviour

On desktop, tabs sit directly under the object header in a single row. Labels are short nouns with optional counts.

Desktop rules

  • One row only. If tabs don't fit, move the lowest-priority ones into a “More” menu instead of wrapping.
  • Use links with real URLs (/invoices/1024/activity) or a query param — not client-only state.
  • Show counts only where they help decide to open a tab: “Files 3”, not “Activity 241”.
  • Keep the tab bar sticky on long pages so users can switch without scrolling back up.
Object-wide actions live in the header above the tabs. The URL carries the tab, and unsaved changes are marked.

06Mobile behaviour

On mobile, a row of 5 tabs won't fit. Either scroll the tab bar horizontally with a clear affordance, or replace tabs with a section picker.

Mobile rules

  • For up to 4 short tabs, use a full-width segmented row.
  • For more, use a horizontally scrollable tab bar with the active tab scrolled into view and a fade at the edge.
  • Alternatively, use a dropdown section picker labelled with the current tab.
  • Keep object-wide actions in the header overflow menu.
More than four tabs scroll horizontally, with the active tab in view and a fade at the edge.

07States

  • Default tab

    First or most used tab active on load; URL may omit it.

  • Active

    Underline or fill plus stronger text; aria-selected or aria-current.

  • Loading tab

    Tab bar stays interactive; content shows a skeleton of that tab's layout.

  • Unsaved changes

    Tab label shows a dot; switching keeps the draft.

  • Overflow

    Extra tabs in “More ▾”, which becomes active when one of them is.

  • Disabled / hidden

    Tabs the user can't access are hidden, not disabled.

08Edge cases

  1. EC-01

    Unsaved form in a tab

    The user edits Settings, then switches to Activity.

    Recommendation

    Keep the draft in memory and mark the tab with a dot. Warn only when leaving the object entirely, not when switching tabs.

  2. EC-02

    Deep link to a tab the user can't see

    A member opens a link to the Billing tab, which only admins see.

    Recommendation

    Open the default tab with a notice: “Billing is only visible to admins.” Don't show a broken or empty tab.

  3. EC-03

    Active tab inside More

    The active tab is one of the overflowed tabs.

    Recommendation

    Show the active tab's name on the More button (“Integrations ▾”) so the current location is never hidden.

  4. EC-04

    Tabs vs. filters

    Tabs like “All / Open / Closed” are really filters on one list.

    Recommendation

    Use a segmented control in the list toolbar instead, and combine it with the filter state in the URL.

  5. EC-05

    Slow tab content

    The Activity tab takes 2 seconds to load.

    Recommendation

    Switch the active tab immediately and show a skeleton; never block the tab bar until data arrives.

09Microcopy

  • Tab labels

    Avoid

    “Information, Data, Other”

    Prefer

    “Overview, Activity, Files, Settings”

  • Count

    Prefer

    “Files 3”

  • Overflow

    Avoid

    “…”

    Prefer

    “More ▾”

  • Restricted deep link

    Prefer

    “Billing is only visible to admins. Showing Overview.”

10Accessibility

  • For in-page tabs, use the tabs pattern: role="tablist", role="tab" with aria-selected, and role="tabpanel" linked by aria-controls.
  • Arrow keys move between tabs; Tab moves into the panel.
  • If tabs navigate between URLs, use links with aria-current="page" instead of the ARIA tab roles.
  • The unsaved-changes dot needs a text alternative such as “Settings, unsaved changes”.

11Developer notes

  1. 01

    Pick one model and stick to it: route-based tabs (each tab a URL segment) or in-page tabs with a query param. Both must survive refresh and Back.

  2. 02

    Preserve per-tab state in a store keyed by object and tab, or keep inactive panels mounted if they're cheap.

  3. 03

    Prefetch the next likely tab's data on hover or after the first tab loads.

  4. 04

    Compute visible tabs from permissions on the server.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement tabs on the existing detail page.

Requirements:
- Object header (title, status, object-wide actions) above the tabs, visible on every tab.
- Tabs reflect the URL (route segment or ?tab=), survive refresh and Back, and support deep links.
- Single row; overflowed tabs go into "More ▾", which shows the active tab's name when relevant.
- Preserve per-tab state (filters, scroll, unsaved drafts) across switches; mark tabs with unsaved changes.
- Switch immediately and show a skeleton while a tab's data loads; prefetch likely tabs.
- Hide tabs the user can't access; deep links to them fall back to the default tab with a notice.
- Accessibility: tablist/tab/tabpanel with arrow-key navigation for in-page tabs, or links with aria-current for route tabs.
- Sticky tab bar on long pages.
- Mobile: segmented row for ≤4 tabs, otherwise a scrollable tab bar with the active tab in view, or a section picker.

Do not redesign the existing interface.