Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Dialog

A modal dialog that interrupts the user with important content and expects a response. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::dialog>
    <x-slate::dialog-trigger>
        <x-slate::button variant="outline">Edit profile</x-slate::button>
    </x-slate::dialog-trigger>
    <x-slate::dialog-content
        title="Edit profile"
        description="Make changes to your profile here. Click save when you're done."
    >
        <div class="grid gap-3 py-2">
            <x-slate::field>
                <x-slate::field-label for="dialog-name">Name</x-slate::field-label>
                <x-slate::input id="dialog-name" value="Pedro Duarte" />
            </x-slate::field>
            <x-slate::field>
                <x-slate::field-label for="dialog-username">Username</x-slate::field-label>
                <x-slate::input id="dialog-username" value="@peduarte" />
            </x-slate::field>
        </div>
        <x-slot:footer>
            <x-slate::dialog-close>
                <x-slate::button variant="outline">Cancel</x-slate::button>
            </x-slate::dialog-close>
            <x-slate::button>Save changes</x-slate::button>
        </x-slot:footer>
    </x-slate::dialog-content>
</x-slate::dialog>

Composition
code 
Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    ├── …body…
    └── DialogFooter

Prefer title / description / footer on dialog-content for typical forms. Compose the parts manually for custom layouts.

Custom composition
example.blade.php 
<x-slate::dialog>
    <x-slate::dialog-trigger>
        <x-slate::button>Share</x-slate::button>
    </x-slate::dialog-trigger>
    <x-slate::dialog-content>
        <x-slate::dialog-header>
            <x-slate::dialog-title>Share link</x-slate::dialog-title>
            <x-slate::dialog-description>
                Anyone with the link can view this document.
            </x-slate::dialog-description>
        </x-slate::dialog-header>
        <x-slate::input value="https://slate.electrik.dev" readonly />
        <x-slate::dialog-footer>
            <x-slate::dialog-close>
                <x-slate::button variant="outline">Close</x-slate::button>
            </x-slate::dialog-close>
            <x-slate::button>Copy</x-slate::button>
        </x-slate::dialog-footer>
    </x-slate::dialog-content>
</x-slate::dialog>

Without close button
example.blade.php 
<x-slate::dialog>
    <x-slate::dialog-trigger>
        <x-slate::button variant="outline">Confirm</x-slate::button>
    </x-slate::dialog-trigger>
    <x-slate::dialog-content
        :show-close-button="false"
        title="Are you sure?"
        description="This action cannot be undone."
    >
        <x-slot:footer>
            <x-slate::dialog-close>
                <x-slate::button variant="outline">Cancel</x-slate::button>
            </x-slate::dialog-close>
            <x-slate::button variant="destructive">Continue</x-slate::button>
        </x-slot:footer>
    </x-slate::dialog-content>
</x-slate::dialog>

API Reference

Dialog
Prop Type Default Description
open bool false Initial open state
as string div Root HTML element

DialogContent
Prop Type Default Description
showCloseButton bool true Corner close control
title string — Compose dialog-title
description string — Compose dialog-description

Named slot: footer → wraps content in dialog-footer.

Parts

dialog-trigger, dialog-close, dialog-header, dialog-footer, dialog-title, and dialog-description.

Notes
  • Escape closes the dialog; clicking the overlay also closes it
  • dialog-content teleports to body so stacking context stays correct
  • Consumers need Alpine.js (Livewire includes it)
Last updated .