Dialog
Modal dialog component for displaying content in an overlay
Basic Usage
The most basic dialog with Livewire entangle:
<neura::button wire:click="$set('showBasicDialog', true)">
Open Dialog
</neura::button>
<neura::dialog
entangle="showBasicDialog"
title="Dialog Title"
description="Dialog description"
>
<div class="flex gap-3 justify-end">
<neura::button variant="ghost" wire:click="$set('showBasicDialog', false)">
Cancel
</neura::button>
<neura::button variant="primary" wire:click="$set('showBasicDialog', false)">
Confirm
</neura::button>
</div>
</neura::dialog>With Livewire Entangle
Use entangle to sync state with Livewire:
<neura::button wire:click="$set('showDialog', true)">
Open Dialog
</neura::button>
<neura::dialog
entangle="showDialog"
title="Dialog Title"
description="Dialog description"
>
<div class="flex gap-3 justify-end">
<neura::button wire:click="$set('showDialog', false)">
Close
</neura::button>
</div>
</neura::dialog>Simple Dialog
Simple dialog without title or description:
<neura::button wire:click="$set('showSimpleDialog', true)">
Open Simple Dialog
</neura::button>
<neura::dialog entangle="showSimpleDialog">
<div class="space-y-4">
<p>Your content here</p>
<neura::button wire:click="$set('showSimpleDialog', false)">
Close
</neura::button>
</div>
</neura::dialog>Confirmation Dialog
Confirmation dialog with actions:
<neura::button wire:click="$set('showConfirmationDialog', true)">
Delete Item
</neura::button>
<neura::dialog
entangle="showConfirmationDialog"
title="Delete Item"
description="Are you sure? This action cannot be undone."
>
<div class="flex gap-3 justify-end">
<neura::button variant="ghost" wire:click="$set('showConfirmationDialog', false)">
Cancel
</neura::button>
<neura::button variant="danger" wire:click="$set('showConfirmationDialog', false)">
Delete
</neura::button>
</div>
</neura::dialog>Dialog with Form
Dialog containing a form:
<neura::button wire:click="$set('showFormDialog', true)">
Add New Item
</neura::button>
<neura::dialog
entangle="showFormDialog"
title="Add New Item"
description="Fill in the form below."
>
<div class="space-y-4">
<neura::input type="text" placeholder="Name" />
<neura::textarea placeholder="Description" />
<div class="flex gap-3 justify-end">
<neura::button variant="ghost" wire:click="$set('showFormDialog', false)">
Cancel
</neura::button>
<neura::button variant="primary" wire:click="$set('showFormDialog', false)">
Save
</neura::button>
</div>
</div>
</neura::dialog>Use Cases
Common usage examples:
Delete Confirmation
Information Dialog
Best Practices
Use clear and concise titles
Titles should clearly describe the purpose of the dialog
Always provide a close action
Add a Cancel or Close button to allow users to close the dialog
Close with Escape or overlay click
The dialog closes automatically with the Escape key or by clicking on the overlay
Keep content concise
Dialogs should be focused on a specific task
Use entangle for Livewire
To sync state with Livewire, use the entangle prop
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Initial open state (when not using entangle) |
| title | string|null | null | Dialog title text |
| description | string|null | null | Dialog description text |
| entangle | string|null | null | Livewire property name to sync state with |