Confirm a destructive action

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

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

open = false;

  toggleModal(): void {
    this.open = !this.open;
  }

<goabx-button type="tertiary" leadingIcon="trash" (onClick)="toggleModal()">Delete record</goabx-button>
<goabx-modal [open]="open" (onClose)="toggleModal()" heading="Are you sure you want to delete this record?" [actions]="actions">
  <p>This action cannot be undone.</p>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goabx-button type="tertiary" size="compact" (onClick)="toggleModal()">Cancel</goabx-button>
      <goabx-button type="primary" variant="destructive" size="compact" (onClick)="toggleModal()">Delete record</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-modal>

const modal = document.getElementById('delete-modal');
const deleteBtn = document.getElementById('delete-btn');
const cancelBtn = document.getElementById('cancel-btn');
const confirmDeleteBtn = document.getElementById('confirm-delete-btn');

deleteBtn.addEventListener('_click', () => {
  modal.setAttribute('open', 'true');
});

cancelBtn.addEventListener('_click', () => {
  modal.removeAttribute('open');
});

confirmDeleteBtn.addEventListener('_click', () => {
  modal.removeAttribute('open');
});

modal.addEventListener('_close', () => {
  modal.removeAttribute('open');
});

<goa-button version="2" type="tertiary" leadingicon="trash" id="delete-btn">Delete record</goa-button>
<goa-modal version="2" id="delete-modal" heading="Are you sure you want to delete this record?">
  <p>This action cannot be undone.</p>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" type="tertiary" size="compact" id="cancel-btn">Cancel</goa-button>
      <goa-button version="2" type="primary" variant="destructive" size="compact" id="confirm-delete-btn">Delete record</goa-button>
    </goa-button-group>
  </div>
</goa-modal>

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