TwigcnBundle

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Default

Are you sure?

This action cannot be undone.

Destructive Action

Delete Item

Are you sure you want to delete this item? This action cannot be undone.

With Details

Unsaved Changes

You have unsaved changes. Do you want to save them before leaving?

Usage

<twig:Button onclick="document.getElementById('my-alert').showModal()">
    Delete
</twig:Button>

<twig:Dialog id="my-alert">
    <header>
        <h2>Are you sure?</h2>
        <p>This action cannot be undone.</p>
    </header>
    <footer>
        <twig:Button variant="outline" onclick="...close()">
            Cancel
        </twig:Button>
        <twig:Button variant="destructive" onclick="...close()">
            Delete
        </twig:Button>
    </footer>
</twig:Dialog>