Dialog Components
Modal
You can trigger the modal to close from any PHP class by dispatching a close event $this->dispatch('close');.
Cyber Week Mega Offer!
Huge discounts on all Hostinger plans
Use our referral link for an extra 20% off!
# Basic usage
<x-button x-on:click="$wire.openDefault = true" label="Default" /><x-button x-on:click="$wire.openDeleteModal = true" label="Delete Modal" /><x-button x-on:click="$wire.openFormModal = true" label="Form Modal" /> {{-- Default modal --}}<x-modal wire:model="openDefault"> Model content..</x-modal> {{-- Delete modal --}}<x-modal wire:model="openDeleteModal" md> <div class="p-6 text-center whitespace-normal"> <x-icon name="exclamation-circle" class="mx-auto mb-4 text-gray-400 !size-12 dark:text-gray-200" /> <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400" style="text-transform: none"> {{ __('Are you sure you want to delete this?') }} </h3> <div class="flex items-center justify-center gap-3"> <x-button label="Close" x-on:click="$dispatch('close')" red flat /> <x-button label="Yes, delete" flat /> </div> </div></x-modal> {{-- Form modal --}}<x-modal wire:model="openFormModal" dismissible xl> <!-- Modal header --> <div class="flex items-center justify-between pb-3 border-b rounded-t dark:border-gray-600"> <h3 class="text-lg font-semibold text-gray-900 capitalize dark:text-white"> {{ __('add new user') }} </h3> </div> <!-- Modal body --> <form wire:submit="createUser" class="pt-5"> <div class="grid grid-cols-2 gap-4 mb-5"> <div class="col-span-2 sm:col-span-1"> <x-input label="Name *" wire:model="name" /> </div> <div class="col-span-2 sm:col-span-1"> <x-input label="Email *" wire:model="email" /> </div> <div class="col-span-2 sm:col-span-1"> <x-select label="Select country *" wire:model="country"> <option value="Bangladesh">Bangladesh</option> <option value="Nepal">Nepal</option> <option value="India">India</option> <option value="Bhutan">Bhutan</option> </x-select> </div> <div class="col-span-2"> <x-textarea label="Details" wire:model="details" /> </div> </div> <div class="flex justify-end"> <x-button label="Submit" spinner="createUser" /> </div> </form></x-modal># Open with Livewire
It will send network request.
<x-button wire:click="$set('openWithLivewire', true)" label="Livewire" /> <x-modal wire:model="openWithLivewire"> Model content..</x-modal># Open with Alpine Js
It will not send any network request.
<x-button x-on:click="$wire.openWithAlpine = true" label="Alpine" /> <x-modal wire:model="openWithAlpine"> Model content..</x-modal># Position
<x-button x-on:click="$wire.openTop = true" label="Top" /> {{-- default --}}<x-button x-on:click="$wire.openBottom = true" label="Bottom" /><x-button x-on:click="$wire.openLeft = true" label="Left" /><x-button x-on:click="$wire.openRight = true" label="Right" /><x-button x-on:click="$wire.openCenter = true" label="Center" /> {{-- default --}}<x-modal wire:model="openTop"> Model content..</x-modal> <x-modal wire:model="openBottom" bottom> Model content..</x-modal> <x-modal wire:model="openLeft" left> Model content..</x-modal> <x-modal wire:model="openRight" right> Model content..</x-modal> <x-modal wire:model="openCenter" center> Model content..</x-modal># Size variants
<x-button x-on:click="$wire.openSm = true" label="SM" /><x-button x-on:click="$wire.openMd = true" label="MD" /><x-button x-on:click="$wire.openLg = true" label="LG" /> {{-- default --}}<x-button x-on:click="$wire.openXl = true" label="XL" /><x-button x-on:click="$wire.open2Xl = true" label="2XL" /><x-button x-on:click="$wire.open3Xl = true" label="3XL" /><x-button x-on:click="$wire.open4Xl = true" label="4XL" /><x-button x-on:click="$wire.open5Xl = true" label="5XL" /><x-button x-on:click="$wire.open6Xl = true" label="6XL" /><x-button x-on:click="$wire.open7Xl = true" label="7XL" /><x-button x-on:click="$wire.openFull = true" label="FULL" /> <x-modal wire:model="openSm" sm> Model content..</x-modal> <x-modal wire:model="openMd" md> Model content..</x-modal> {{-- default --}}<x-modal wire:model="openLg" lg> Model content..</x-modal> <x-modal wire:model="openXl" xl> Model content..</x-modal> <x-modal wire:model="open2Xl" 2xl> Model content..</x-modal> <x-modal wire:model="open3Xl" 3xl> Model content..</x-modal> <x-modal wire:model="open4Xl" 4xl> Model content..</x-modal> <x-modal wire:model="open5Xl" 5xl> Model content..</x-modal> <x-modal wire:model="open6Xl" 6xl> Model content..</x-modal> <x-modal wire:model="open7Xl" 7xl> Model content..</x-modal> <x-modal wire:model="openFull" dismissible full> Model content..</x-modal># Persistent
<x-button x-on:click="$wire.openPersistent = true" label="Persistent" /> <x-modal wire:model="openPersistent" dismissible persistent> Model content..</x-modal># Without transition
<x-button x-on:click="$wire.openNoTransition = true" label="Without transition" /> <x-modal wire:model="openNoTransition" no-transition> Model content..</x-modal># Background blur
<x-button x-on:click="$wire.openBlurNone = true" label="Blur none" /> {{-- default --}}<x-button x-on:click="$wire.openBlur = true" label="Blur" /><x-button x-on:click="$wire.openBlurSm = true" label="Blur SM" /><x-button x-on:click="$wire.openBlurMd = true" label="Blur MD" /><x-button x-on:click="$wire.openBlurLg = true" label="Blur LG" /><x-button x-on:click="$wire.openBlurXl = true" label="Blur XL" /><x-button x-on:click="$wire.openBlur2Xl = true" label="Blur 2XL" /><x-button x-on:click="$wire.openBlur3Xl = true" label="Blur 3XL" /> {{-- default --}}<x-modal wire:model="openBlurNone" blur-none> Model content..</x-modal> <x-modal wire:model="openBlur" blur> Model content..</x-modal> <x-modal wire:model="openBlurSm" blur-sm> Model content..</x-modal> <x-modal wire:model="openBlurMd" blur-md> Model content..</x-modal> <x-modal wire:model="openBlurLg" blur-lg> Model content..</x-modal> <x-modal wire:model="openBlurXl" blur-xl> Model content..</x-modal> <x-modal wire:model="openBlur2Xl" blur-2xl> Model content..</x-modal> <x-modal wire:model="openBlur3Xl" blur-3xl> Model content..</x-modal># Rounded corner
- Allowed values:
rounded-noneroundedrounded-smrounded-mdrounded-lgrounded-xlrounded-2xlrounded-3xlrounded-full
<x-button x-on:click="$wire.openRoundedNone = true" label="Rounded none" /><x-button x-on:click="$wire.openRounded = true" label="Rounded" /><x-button x-on:click="$wire.openRoundedSm = true" label="Rounded SM" /><x-button x-on:click="$wire.openRoundedMd = true" label="Rounded MD" /><x-button x-on:click="$wire.openRoundedLg = true" label="Rounded LG" /> {{-- default --}}<x-button x-on:click="$wire.openRoundedXl = true" label="Rounded XL" /> <x-modal wire:model="openRoundedNone" rounded-none> Model content..</x-modal> <x-modal wire:model="openRounded" rounded> Model content..</x-modal> <x-modal wire:model="openRoundedSm" rounded-sm> Model content..</x-modal> <x-modal wire:model="openRoundedMd" rounded-md> Model content..</x-modal> {{-- default --}}<x-modal wire:model="openRoundedLg" rounded-lg> Model content..</x-modal> <x-modal wire:model="openRoundedXl" rounded-xl> Model content..</x-modal># Disable focus trap
The
focus trap is enabled by default, but you can disable it by including the without-trap-focus attribute.
<x-modal without-trap-focus />Default settings
Change modal default settings according your needs config/tallcraftui.php
return [ 'modal' => [ 'size' => Size::LG->value, 'blur' => false, // Allowed: true, false 'position' => Position::TOP->value, 'border-radius' => BorderRadius::RoundedLg->value, ],];