Confirm a destructive action

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>

open = false;

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

<goab-button type="tertiary" leadingIcon="trash" (onClick)="toggleModal()"
  >Delete record</goab-button
>
<goab-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">
      <goab-button type="tertiary" size="compact" (onClick)="toggleModal()"
        >Cancel</goab-button
      >
      <goab-button
        type="primary"
        variant="destructive"
        size="compact"
        (onClick)="toggleModal()"
        >Delete record</goab-button
      >
    </goab-button-group>
  </ng-template>
</goab-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

View old example docs