Flows and confirms.
See how async flows work, then explore confirmation popups and dialog behavior. Each example includes runnable demos or code you can adapt.
Flows
Basic form: success and failureSubmit a typed form, inspect the pending state, and toggle a simulated server error.Interactive demoMultiple actionsGive save and publish separate inputs, pending labels, confirmations, and outcomes.Interactive demoConfirm, then run a flowA compact example: confirm in a popup, run an async action, and show its result.Interactive demoCancel an abort-aware requestPass the signal to work that supports abort and keep the flow busy until it settles.Interactive demoCancel and back navigationKeep navigation callbacks explicit and avoid accidental form submission.Interactive demoSequential stepsAwait related steps in one runner for one lock and one final result.Interactive demoIndependent formsUse one provider while each form keeps its own busy state and result.Interactive demoReact Hook Form validationRun the async flow only after React Hook Form accepts the values.Integration recipeTanStack Query mutationAwait mutateAsync and let the application choose a single feedback owner.Integration recipeNext.js Server FunctionCall a server function from a client flow and map domain failures to safe messages.Integration recipeHeadless custom controlsRender state yourself and import the hook from the headless entry.Interactive demoThree actions: save, discard, or cancelHandle unsaved edits in a dialog with two async actions and an explicit cancel choice.Interactive demoThree actions: draft, publish, or cancelReview a release, save a private draft, or publish it. Simulate an error and retry inside the dialog.Interactive demo
Confirms
Destructive confirmationRequire explicit confirmation before running a destructive action.Interactive demoConfirmation from a dialog formSee the composition pattern and its focus-management caveats when a form is already inside a modal.Integration recipeStandalone confirm and alertAsk for confirmation or acknowledgement outside a form.Interactive demoDialog variants and sizesTry the supported variants and responsive sizes in the built-in dialog.Interactive demoEscape and outside dismissalConfigure Escape and backdrop dismissal independently and observe the boolean result.Interactive demoRich dialog previewAdd structured React content with plain-text accessible title and description.Interactive demoRetained confirmation and errorKeep the dialog open during execution and show an error without retrying.Interactive demoTheme tokens and RTLUse an optional theme and render provider-owned dialogs and notifications in right-to-left layouts.Interactive demo