Confirm a destructive action

React

Angular

Web Components

const [open, setOpen] = useState(false);

<GoabButton
        type="tertiary"
        leadingIcon="trash"
        onClick={() => setOpen(true)}>
        Delete record
      </GoabButton>
      <GoabModal
        heading="Are you sure you want to delete this record?"
        open={open}
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup alignment="end">
            <GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
              Cancel
            </GoabButton>
            <GoabButton
              type="primary"
              variant="destructive"
              size="compact"
              onClick={() => setOpen(false)}>
              Delete record
            </GoabButton>
          </GoabButtonGroup>
        }>
        <p>This action cannot be undone.</p>
      </GoabModal>

Confirm a destructive action like deletion to prevent accidental data loss.

When to use

Use this pattern when:

A user is about to delete data permanently
The action cannot be undone
You need to prevent accidental destructive actions
Data loss would have significant impact

Considerations

Use the destructive button variant to emphasize the danger
Clearly state that the action cannot be undone
Provide a cancel option that’s easy to access
Use a tertiary button with a trash icon for the initial action