---
title: Confirmation Modals - Done
slug: confirmation-modals-done
createdAt: 2025-02-11T18:18:28.592Z
---

# Basic Confirmation

![](https://api.archbee.com/api/optimize/ekdzobNU8PAqpbk3VU6LC-F500ij3t3hUe9ZjCKFHvx-20250211-213042.png)

```html
<div class="modal-background">
    <div class="modal-container">
        <div class="modal-heading-container">
            <h1 class="modal-h1">Delete Object?</h1>
            <div>Are you sure you want to delete this object? This action cannot be undone.</div>
        </div>
        <div class="form-button-container">
            <button type="button" class="button tertiary full w-button">Cancel</button>
            <button type="button" class="button full danger w-button">Delete</button>
        </div>
        <div class="modal-close-button w-embed">
            <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg></div>
    </div>
</div>
```

# Enhanced Confirmation (for destructive actions)

![](https://api.archbee.com/api/optimize/ekdzobNU8PAqpbk3VU6LC-_d9Im9euod9hVUJMTFLzh-20250211-213057.png)

```html
  <div class="modal-background">
    <div class="modal-container">
      <div class="modal-heading-container">
        <h1 class="modal-h1">Confirm Destructive Action</h1>
        <div class="model-icon w-embed">
            <svg xmlns="http://www.w3.org/2000/svg" height="512" width="512" fill="currentColor" viewbox="0 0 512 512"><path d="M34.5 420.4c-1.6 2.8-2.5 6-2.5 9.3c0 10.2 8.2 18.4 18.4 18.4l411.2 0c10.2 0 18.4-8.2 18.4-18.4c0-3.3-.9-6.4-2.5-9.3L276.5 75.8C272.2 68.5 264.4 64 256 64s-16.2 4.5-20.5 11.8L34.5 420.4zM6.9 404.2l201-344.6C217.9 42.5 236.2 32 256 32s38.1 10.5 48.1 27.6l201 344.6c4.5 7.7 6.9 16.5 6.9 25.4c0 27.8-22.6 50.4-50.4 50.4L50.4 480C22.6 480 0 457.4 0 429.6c0-8.9 2.4-17.7 6.9-25.4zM256 160c8.8 0 16 7.2 16 16l0 128c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zM232 384a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"></path></svg>
          </div>
      </div>
        <form id="confirmation" name="confirmation" data-name="confirmation" method="get" class="form">
          <div>
            <div class="w-richtext">
              <p>This action is irreversible. Please read and acknowledge the consequences below before proceeding.</p>
              <p><strong>Please acknowledge that:</strong></p>
              <ul role="list">
                <li>The action cannot be undone</li>
                <li>Critical data may be permanently lost</li>
                <li>System changes may affect related items</li>
              </ul>
            </div>
            <div>Confirm by typing <span class="confirm-destructive"><code class="danger-text">confirm-destructive</code></span> below.</div>
          </div>
            <input class="form-field w-input" maxlength="256" name="confirm-text" data-name="confirm-text" placeholder="Type confirmation text..." type="text" id="confirm-text">
        </form>
      <div class="form-button-container">
        <button type="button" class="button tertiary full w-button">Cancel</button>
        <button type="button" class="button full danger disabled w-button">Confirm</button>
      </div>
      <div class="modal-close-button w-embed">
          <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg></div>
    </div>
  </div>
```