Sheet 01 · Getting started
Introduction
What SureUI is, and how it decides how much to ask of people.
The idea
When every action opens an “Are you sure?” dialog, people stop reading and confirm on reflex. The one dialog that matters gets the same click as the fifty that didn't.
SureUI gives you more ways to ask: an undo, a second click, a hold, a typed name, or a dialog when you want one. Pick whichever fits the moment.
Five styles
Fig. 01UndoRuns on click, then offers a few seconds to take it back.Fig. 02Click againThe first click arms it, the second confirms.Fig. 03HoldPress and hold until it fills. Letting go cancels.Fig. 04DialogsOpens a dialog, only when there is something to explain.Fig. 05Type to confirmUnlocks only after the exact name is typed.
One contract
Every component takes the same onConfirm. Return a promise and the control stays pending until it settles.
async function deleteProject() { await api.projects.delete(id)}<ConfirmButton undo onConfirm={deleteProject}>Delete</ConfirmButton><ConfirmButton gesture="click-again" onConfirm={deleteProject}>Delete</ConfirmButton><ConfirmButton gesture="hold" onConfirm={deleteProject}>Delete</ConfirmButton><TypeToConfirm phrase="acme-prod" onConfirm={deleteProject} /><ConfirmDialog title="Delete acme-prod?" onConfirm={deleteProject}> <Button>Delete</Button></ConfirmDialog>