Dejavu Docs

Modal

Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.

You still need to be careful about other components with a high z-index value. They might overlap the modal and cause unexpected behavior.

<x-ui::modal.bottom>
    <x-slot:trigger>
        <x-ui::secondary-button>
            Edit profile
        </x-ui::secondary-button>
    </x-slot:trigger>
    <div class="p-8 flex flex-col gap-2">
        <x-ui::h2>Update Profile</x-ui::h2>
        <p>Make changes to your personal details</p>
        <div class="my-4">
            <div class="pb-2 text-sm">Name</div>
            <x-ui::forms.text-input class="w-full">Name</x-ui::forms.text-input>
        </div>
        <div class="my-4">
            <div class="pb-2 text-sm">Birthdate</div>
            <x-ui::forms.text-input type="date" class="w-full"></x-ui::forms.text-input>
        </div>
        <div class="mt-4">
        <x-ui::primary-button>Save Changes</x-ui::primary-button>
        </div>
    </div>
</x-ui::modal.bottom>

Copied!

Close button

The modal closes itself by clicking outside of the modal, but you can add a close button to the modal content aswell.

You don't need to specifically add the close modal component. Any html element with the alpinejs `x-on:click="show=false"` inside the content of the modal itself will work.

<x-ui::modal.bottom>
    <x-slot:trigger>
        <x-ui::secondary-button>
            Delete me
        </x-ui::secondary-button>
    </x-slot:trigger>
    <x-ui::modal.close />
    <div class="p-4">
        <x-ui::h2 class="mb-2">Confirm deletion</x-ui::h2>
        <p class="text-sm">Are you sure you want to delete <b>This super alert</b>. <br> This action cannot be undone</p>
        <div class="flex justify-end gap-2 mt-2">
            <x-ui::secondary-button>Cancel</x-ui::secondary-button>
            <x-ui::primary-button>Delete</x-ui::primary-button>
        </div>
    </div>
</x-ui::modal.bottom>

Copied!

Custom Close button

You don't need to specifically add the close modal component. Any html element with the alpinejs `x-on:click="show=false"` inside the content of the modal itself will work.

<x-ui::modal.bottom>
    <x-slot:trigger>
        <x-ui::secondary-button>
            Upgrade
        </x-ui::secondary-button>
    </x-slot:trigger>
    <div class="p-4">
        <x-ui::h2 class="mb-2">Upgrade</x-ui::h2>
        <p class="text-sm">Are you sure you want to upgrade <b>This super alert</b>. <br> This action cannot be undone</p>
        <div class="flex justify-end gap-2 mt-2">
            <x-ui::secondary-button x-on:click="show=false">Cancel</x-ui::secondary-button>
            <x-ui::primary-button>Upgrade</x-ui::primary-button>
        </div>
    </div>
</x-ui::modal.bottom>

Copied!

Maximum width

There are cases where you want the modal to have a maximum width. You can set the `maxWidth` attribute to `sm`, `md`...

<x-ui::modal.bottom>
    <x-slot:trigger>
        <x-ui::secondary-button>
            Upgrade
        </x-ui::secondary-button>
    </x-slot:trigger>
    <div class="mt-4 pb-4 px-4">
        <x-ui::h2 class="mb-2">Upgrade</x-ui::h2>
        <p class="text-sm">Are you sure you want to upgrade <b>This super alert</b>. <br> This action cannot be undone</p>
        <div class="flex justify-end gap-2 mt-2">
            <x-ui::secondary-button x-on:click="show=false">Cancel</x-ui::secondary-button>
            <x-ui::primary-button>Upgrade</x-ui::primary-button>
        </div>
    </div>
</x-ui::modal.bottom>

Copied!