confirm-dialogs

Summary

A specimen sheet of every ConfirmDialog the site raises.

Raw wireframe

• .context/designs/web/patterns/confirm-dialogs.html

Why it is drawn this way

Twelve dialogs, one component. Every <ConfirmDialog in apps/website/src and packages/ui/src, each labelled with the file that raises it. All are Modal size="sm".

Defaults are "Confirm" and "Cancel". Five dialogs pass no labels. Delete Public Link is destructive but keeps the default "Confirm".

Destructive is uneven. Seven pass destructive and get the red button. Five do not: Suspend User, Delete User, Remove Member, Delete Storage Config and Delete Account — all of them remove or block something.

Placeholders stand for runtime values. {count} and {s} in the library title, {provider} in the accounts dialog (the app fills the lowercase id), {workspace} in Delete Workspace.

While loading the confirm label is "...". Both buttons are disabled. Not drawn.

Drawn as cards, not over a backdrop. Four of these are also drawn in place as modal screens in their own flows.

Related

• delete-recording
• delete-workspace
• cancel-subscription
• toasts

Sources

• packages/ui/src/components/ui/confirm-dialog.tsx
• packages/ui/src/components/ui/modal.tsx