Modal

A dialog box or popup window that is displayed on top of the current page.

Examples

Basic Modal

blade

<x-plume::button x-on:click="$openModal('example-modal')" dusk="open-modal-btn">Open
    Modal</x-plume::button>

<x-plume::modal name="example-modal" title="Modal Title">
    <p class="text-sm">You can put any content here, including forms, images, or
        other components.</p>
    <x-slot:footer>
        <x-plume::button style="outline" x-on:click="close()"
            dusk="modal-cancel">Cancel</x-plume::button>
        ...
    </x-slot:footer>
</x-plume::modal>

Video Content

Modals can contain complex components like videos.

blade

<x-plume::button x-on:click="$openModal('video-modal')">Open Video
    Modal</x-plume::button>

<x-plume::modal name="video-modal" title="Product Walkthrough" maxWidth="4xl">
    <x-plume::video src="https://www.youtube.com/embed/dQw4w9WgXcQ" />
    <x-slot:footer>
        <x-plume::button style="outline" x-on:click="close()">Close</x-plume::button>
    </x-slot:footer>
</x-plume::modal>

Custom Content

You can omit the title and footer for a more minimalist look, or provide a custom header via slot.

blade

<x-plume::button x-on:click="$openModal('custom-modal')">Open Minimal
    Modal</x-plume::button>

<x-plume::modal name="custom-modal">
    <div class="relative">
        <x-plume::button x-on:click="close()" style="ghost"
            class="absolute right-0 top-0 size-8 p-0">
            <x-plume::icon i="icon-[fluent--dismiss-24-regular]" class="size-4" />
        </x-plume::button>
        <div class="flex flex-col items-center justify-center space-y-4 py-8 text-center">
            ...
            <x-plume::button x-on:click="close()" class="w-full">Dismiss</x-plume::button>
        </div>
    </div>
</x-plume::modal>

Prop	Type	Default	Description
name	string	null	Unique identifier for the modal, used with $openModal(name).
show	bool	false	Whether to show the modal by default on page load.
persistent	bool	false	Whether to prevent closing when clicking the backdrop or pressing the ESC key.
maxWidth	string	'2xl'	Maximum width: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'.
title	string	null	Simple title string. For complex headers, use the 'header' slot.
onOpen	string	null	AlpineJS expression or function to call when the modal opens.
onClose	string	null	AlpineJS expression or function to call when the modal closes.

Helper Functions

Control modals programmatically using these Alpine.js helpers.

Function	Description
$openModal(name)	Opens the modal with the specified `name`.
$closeModal(name?)	Closes the modal with the specified `name`. If no name is provided, it attempts to close the active modal.

Usage

Triggering the Modal

blade

<x-plume::button x-on:click="$openModal('confirm-delete')">
                    Delete Item
                    </x-plume::button>

Modal Component

blade

<x-plume::modal name="confirm-delete" title="Confirm Deletion">
    <p>Are you sure you want to delete this?</p>
    <x-slot:footer>
        <x-plume::button style="outline" x-on:click="close()">Cancel</x-plume::button>
        <x-plume::button style="error">Delete</x-plume::button>
    </x-slot:footer>
</x-plume::modal>