Dialog

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

Component Code 
<april:dialog dismissable>
    <slot:trigger>
        <april:button variant="outline">
            Edit Profile
        </april:button>
    </slot:trigger>
    <slot:content class="sm:max-w-[425px]">
        <april:dialog-header>
            <slot:title>
                Edit profile
            </slot:title>
            <slot:description>
                Make changes to your profile here. Click save when you're done.
            </slot:description>
        </april:dialog-header>
        <div class="grid gap-4 py-4">
            <div class="grid grid-cols-4 items-center gap-4">
                <april:label for="name-1" class="text-right">Name</april:label>
                <april:input id="name-1" value="Pedro Duarte" class="col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
                <april:label class="text-right" for="username-1" class="text-right">Username</april:label>
                <april:input class="col-span-3" id="username-1" value="@peduarte" />
            </div>
        </div>
        <april:dialog-footer>
            <april:button class="justify-center">Save changes</april:button>
        </april:dialog-footer>
    </slot:content>
</april:dialog>

Custom close button

Component Code 
<april:dialog dismissable>
    <slot:trigger>
        <april:button variant="outline">
            Edit Profile
        </april:button>
    </slot:trigger>
    <slot:content class="sm:max-w-[425px]">
        <april:dialog-header>
            <slot:title>
                Edit profile
            </slot:title>
            <slot:description>
                Make changes to your profile here. Click save when you're done.
            </slot:description>
        </april:dialog-header>
        <div class="grid gap-4 py-4">
            <div class="grid grid-cols-4 items-center gap-4">
                <april:label for="name-2" class="text-right">Name</april:label>
                <april:input id="name-2" value="Pedro Duarte" class="col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
                <april:label class="text-right" for="username-2" class="text-right">Username</april:label>
                <april:input class="col-span-3" id="username-2" value="@peduarte" />
            </div>
        </div>
        <april:dialog-footer>
            <slot:close class="w-full sm:w-fit my-2 sm:my-0">
                <april:button variant="outline" class="w-full justify-center">Close</april:button>
            </slot:close>
            <april:button class="justify-center">Save changes</april:button>
        </april:dialog-footer>
    </slot:content>
</april:dialog>

Breaking out of parent context

To avoid Z-Index and other bizarre CSS issues (looking at you backdrop-filter:blur), the dialog component supports x-teleport provided by Alpine, you however do not need to wrap the dialog in a template element.

Component Code 
<april:dialog dismissable x-teleport="body">
    <slot:trigger>
        <april:button variant="outline">
            Edit Profile
        </april:button>
    </slot:trigger>
    <slot:content class="sm:max-w-[425px]">
        <april:dialog-header>
            <slot:title>
                Edit profile
            </slot:title>
            <slot:description>
                Make changes to your profile here. Click save when you're done.
            </slot:description>
        </april:dialog-header>
        <div class="grid gap-4 py-4">
            <div class="grid grid-cols-4 items-center gap-4">
                <april:label for="name-3" class="text-right">Name</april:label>
                <april:input id="name-3" value="Pedro Duarte" class="col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
                <april:label class="text-right" for="username-3" class="text-right">Username</april:label>
                <april:input class="col-span-3" id="username-3" value="@peduarte" />
            </div>
        </div>
        <april:dialog-footer>
            <april:button class="justify-center">Save changes</april:button>
        </april:dialog-footer>
    </slot:content>
</april:dialog>

Heading level

The title renders as an h2, one level under the page heading. A reader who moves by heading needs the levels to step down one at a time. Set level when the dialog sits inside a section that already holds a heading.

<april:dialog-header level="3">
    <slot:title>Delete this file</slot:title>
    <slot:description>This cannot be undone.</slot:description>
</april:dialog-header>

Props

Prop Type Default Description
level integer 2 The heading level the title renders as. Accepts 1 to 6.

Publishing Views

Use the following commands to publish these views:

php artisan april:publish dialog
php artisan april:publish dialog-header
php artisan april:publish dialog-footer
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.