Livewire Components

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Quick note on browser compatibility.

This component makes use of two modern CSS features:

Unfortunately both are not (yet) supported in Firefox. The component will still work as expected but it will be missing the enter & exit animations.

Edit profile

Make changes to your profile here. Click save when you're done. 

<x-dialog>
    <x-dialog.trigger>
        Edit Profile
    </x-dialog.trigger>
    <x-dialog.content class="sm:max-w-[425px]">
        <div class="grid gap-4">
            <x-dialog.header>
                <x-dialog.title>
                    Edit profile
                </x-dialog.title>
                <x-dialog.description>
                    Make changes to your profile here. Click save when you're done.
                </x-dialog.description>
            </x-dialog.header>
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <x-label
                        htmlFor="name"
                        class="text-right"
                    >
                        Name
                    </x-label>
                    <x-input
                        id="name"
                        value="pedro duarte"
                        class="col-span-3"
                    />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <x-label
                        htmlFor="username"
                        class="text-right"
                    >
                        Username
                    </x-label>
                    <x-input
                        id="username"
                        value="@peduarte"
                        class="col-span-3"
                    />
                </div>
            </div>
            <x-dialog.footer>
                <x-dialog.close variant="default">Save changes</x-dialog.close>
            </x-dialog.footer>
        </div>
    </x-dialog.content>
</x-dialog>

Installation

php artisan vendor:publish --tag=dialog --force

Usage

<x-dialog>
    <x-dialog.trigger>Open</x-dialog.trigger>
    <x-dialog.content>
        <x-dialog.header>
            <x-dialog.title>Are you absolutely sure?</x-dialog.title>
            <x-dialog.description>
                This action cannot be undone. This will permanently delete your account
                and remove your data from our servers.
            </x-dialog.description>
        </x-dialog.header>
    </x-dialog.content>
</x-dialog>

Examples

Custom Close Button

Share link

Anyone who has this link will be able to view this. 

<x-dialog>
    <x-dialog.trigger>Share</x-dialog.trigger>
    <x-dialog.content class="sm:max-w-md">
        <div class="grid gap-4">
            <x-dialog.header>
                <x-dialog.title>Share link</x-dialog.title>
                <x-dialog.description>
                    Anyone who has this link will be able to view this.
                </x-dialog.description>
            </x-dialog.header>
            <div class="flex items-center space-x-2">
                <div class="grid flex-1 gap-2">
                    <x-label
                        htmlFor="link"
                        class="sr-only"
                    >
                        link
                    </x-label>
                    <x-input
                        id="link"
                        value="https://ui.shadcn.com/docs/installation"
                        readonly
                    />
                </div>
                <x-button
                    type="submit"
                    size="sm"
                    class="px-3"
                >
                    <span class="sr-only">copy</span>
                    <x-lucide-copy class="size-4" />
                </x-button>
            </div>
            <x-dialog.footer class="sm:justify-start">
                <x-dialog.close>Close</x-dialog.close>
            </x-dialog.footer>
        </div>
    </x-dialog.content>
</x-dialog>