All components (204)

Confirm action

Layers · ConfirmAction

What it is and when to use it

The safety question attached to the button that triggers it: "Delete order 1042?" with two ways out, without covering the page. It is the step below Dialog.

When to use it

Deleting a row, deactivating an account, a submission that cannot be repeated. trigger is the button and question the question.
tone is that of the confirm button: error (red, default) for what destroys; accent to confirm something that destroys nothing. confirmText and cancelText change the texts of the two buttons.
If onConfirm returns a promise, the bubble stays open with the button busy until it finishes; if it fails, it says so right there and does not close. A deletion that has not happened cannot look as if it had.

When not to

If deciding requires reading something long, choosing among several things or typing: Dialog.
Asking from code, without a button to attach to: useConfirmation (with ConfirmProvider).
Something that is easily undone: better to do it and offer "Undo" in a notification (useNotifications).

Keyboard: the trigger is pressed with Enter or Space. On opening, focus starts on Cancel on purpose: pressing Enter out of habit does nothing. Escape closes without doing anything. On confirming, the bubble closes and focus returns to the button.

Accessibility: it is an alertdialog with the question as its name; the detail (and the failure, if any) are read as its description. While working, Cancel is disabled and the confirm button stops responding and announces "Working". A failure with no text is reported with a generic message ("The action could not be completed"), never with a blank gap.

Fine-tuning: no variables of its own. It is adjusted with the amset-confirm__* classes and the one shared by all floating elements, amset-floating.

What it looks like

<ConfirmAction
  trigger={<Button variant="outline" tone="error">Delete the order</Button>}
  question="Delete order 1042?"
  detail="The three lines and the notice to the customer will be lost."
  confirmText="Delete"
  onConfirm={borrar}
/>

Props

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

Prop	Type	What it does
`onConfirm`required	`() => void \| Promise<void>`	The action. If it returns a promise, the bubble stays open with the button busy until it finishes, and if it fails it says so right there without closing: a deletion that has not been done cannot look as if it had.
`question`required	`string`	The question, short and phrased positively: "Delete order 1042?".
`trigger`required	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	What triggers the confirmation. It has to be focusable: a button.
`cancelText`	`string`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`confirmText`	`string`	—
`detail`	`string`	What needs to be known before deciding: what is lost, whom it affects.
`placement`	`Placement`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	The tone of the confirm button. By default `error` (red): this is mostly used to delete and cancel accounts. To confirm something that destroys nothing, `accent`.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

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