Logo
Neura
Back to Home

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