Modal

x-modal

An accessible, teleported dialog (role="dialog", labelled by its header) with focus trapping, header/content/footer slots, and event-driven open/close.

php artisan components:add modal

Playground

open closeButton zIndex

Examples

Confirmation dialog

A focus-trapped dialog with header, content and footer slots.

<div class="flex min-h-72 w-full items-center justify-center">
    <x-components.modal>
        <x-slot:trigger>
            <x-components.button>Open modal</x-components.button>
        </x-slot:trigger>
        <x-slot:header>Delete project</x-slot:header>
        <x-slot:content>
            <p class="text-foreground/70">This action cannot be undone. This will permanently delete the project and all of its data.</p>
        </x-slot:content>
        <x-slot:footer>
            <x-components.button variant="ghost" x-on:click="modalOpen = false">Cancel</x-components.button>
            <x-components.button variant="destructive" x-on:click="modalOpen = false">Delete</x-components.button>
        </x-slot:footer>
    </x-components.modal>
</div>

Props

Prop	Type	Default	Description
`open`	boolean	`false`	Whether the modal is open on load.
`closeButton`	boolean	`true`	Show the top-right close button.
`zIndex`	text	`50`	The stacking z-index for the overlay.

Slots

Slot	Description
`trigger`	Custom element that opens the modal.
`header`	Modal heading.
`content`	Main modal body.
`footer`	Action row, usually buttons.

Works with

`components:add modal` pulls these in automatically.

x-button Button