All components (204)

Confirm provider

Layers · ConfirmProvider

What it is and when to use it

Ask "are you sure?" from any component without mounting a dialog and its state on every screen. It is placed once, at the top of the tree (AmsetProvider already includes it), and from inside:

const { confirm } = useConfirmation()
if (await confirm({ title: '¿Borrar el pedido 1042?' })) await borrar()

When to use it

Confirming an action launched from code: a menu option, a shortcut, a row action.
The promise answers true only on confirming. Cancelling answers false, and so does unmounting the provider or asking for another confirmation while one is open (the first is taken as cancelled): the await of whoever asked is never left hanging.
tone is the one from the common vocabulary and goes to the confirm button, as in ConfirmAction: 'error' (default) for what deletes; 'accent' for what destroys nothing. confirmText and cancelText change the button texts ("Confirm" and "Cancel" by default).

When not to

The question attached to the button that triggers it, without covering the page: ConfirmAction.
If before deciding you have to read something long, choose or type: a Dialog with whatever is needed inside.
Inside AmsetProvider it does not need to be added again (withoutConfirm removes it, if the application brings its own).

Keyboard: it is a modal <dialog>: on opening, focus enters it and does not leave while it is open. It is an alertdialog: clicking outside does not close it, and Escape is cancel (it answers false), as the WAI-ARIA pattern requires. Tab moves between Cancel and Confirm; Enter or Space press.

Accessibility: the dialog is announced as alertdialog with title as its name and description as its description. With one of the four that warn ('error', the default, 'warning', 'info' or 'success') the header carries its icon and the confirm button takes that color; with 'accent' or 'neutral', no icon. There is no empty body: the question goes in the title and the detail in the description.

Fine-tuning: no variables of its own. It is a Dialog of kind="alert": it is adjusted with its classes, amset-dialog__*.

What it looks like

The question comes from a hook, without mounting a dialog on this screen.

<ConfirmProvider>
  <App />
</ConfirmProvider>

// Dentro:
const { confirm } = useConfirmation()
const seguro = await confirm({
  title: 'Deactivate Southern Distributors?',
  description: 'It stops receiving orders and invoices.',
  confirmText: 'Deactivate',
})

Props

Import it with import { ConfirmProvider } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: