Modal

Modal dialog with trigger, close button, backdrop click, and Escape key support.

Basic modal

<x-boson::modal.trigger name="basic-modal">
    <x-boson::button>Open Modal</x-boson::button>
</x-boson::modal.trigger>

<x-boson::modal name="basic-modal">
    <h2>Modal title</h2>
    <p>This is a basic modal dialog.</p>
    <x-boson::button variant="primary">Confirm</x-boson::button>
</x-boson::modal>

Confirmation modal

<x-boson::modal.trigger name="confirm-modal">
    <x-boson::button variant="danger">Delete item</x-boson::button>
</x-boson::modal.trigger>

<x-boson::modal name="confirm-modal">
    <h2>Are you sure?</h2>
    <p>This action cannot be undone.</p>
    <div class="flex gap-3">
        <x-boson::button variant="danger">Delete</x-boson::button>
        <x-boson::button variant="ghost" data-modal-close>Cancel</x-boson::button>
    </div>
</x-boson::modal>

Props

Modal

Modal Trigger