Modal
Modal overlay component for displaying content in a centered dialog with backdrop
Basic Usage
The most basic modal with Livewire entangle:
<neura::button wire:click="$set('showModal', true)">
Open Modal
</neura::button>
<neura::modal entangle="showModal">
<neura::modal.header>
<neura::heading level="h3">Modal Title</neura::heading>
</neura::modal.header>
<neura::modal.body>
<p>Modal content goes here</p>
</neura::modal.body>
<neura::modal.footer>
<neura::button wire:click="$set('showModal', false)">
Close
</neura::button>
</neura::modal.footer>
</neura::modal>With Livewire ModalComponent
Create a modal component by extending
Neura\Kit\Support\Modal\ModalComponent. This provides a clean way to create reusable modal components:
This is a live example of a modal component created with
ModalComponent. Click the button above to see it in action.
Creating a Modal Component
Use the
neura-kit:make-modal command to create a new modal component:
php artisan neura-kit:make-modal UserModal
This creates a modal component class that extends
ModalComponent:
<?php
namespace App\View\Pages\Backend\Users;
use Neura\Kit\Support\Modal\ModalComponent;
use Illuminate\Contracts\View\View;
class UserModal extends ModalComponent
{
public $userId = null;
public $name = '';
public $email = '';
public function mount($userId = null)
{
if ($userId) {
$user = \App\Models\User::find($userId);
$this->userId = $user->id;
$this->name = $user->name;
$this->email = $user->email;
}
}
public function save()
{
// Save logic here
$this->closeModal();
}
public function render(): View
{
return view('pages.backend.users.user-modal');
}
}
Then use it in your Blade view:
<!-- Open modal with component -->
<neura::button
wire:click="$wire.modal('pages.backend.users.user-modal').open()"
>
Open User Modal
</neura::button>
<!-- Open modal with arguments -->
<neura::button
wire:click="$wire.modal('pages.backend.users.user-modal').with(['userId' => 1]).open()"
>
Edit User
</neura::button>
<!-- Open modal with custom attributes -->
<neura::button
wire:click="$wire.modal('pages.backend.users.user-modal').with(['userId' => 1]).attrs(['maxWidth' => 'lg']).open()"
>
Edit User (Large)
</neura::button>
The modal view should use the modal sub-components:
<!-- resources/views/pages/backend/users/user-modal.blade.php -->
<div>
<neura::modal.header>
<neura::heading level="h3" size="md">
{{ $userId ? 'Edit User' : 'Create User' }}
</neura::heading>
</neura::modal.header>
<neura::modal.body>
<div class="space-y-4">
<neura::input wire:model="name" label="Name" />
<neura::input wire:model="email" type="email" label="Email" />
</div>
</neura::modal.body>
<neura::modal.footer>
<neura::button variant="ghost" wire:click="closeModal">
Cancel
</neura::button>
<neura::button variant="primary" wire:click="save">
{{ $userId ? 'Update' : 'Create' }}
</neura::button>
</neura::modal.footer>
</div>With Livewire Entangle
Use entangle to sync state with Livewire:
<neura::modal entangle="showModal">
<!-- Modal content -->
</neura::modal>Modal Sizes
The modal supports different sizes to adjust the maximum width:
<neura::modal size="sm" entangle="showModal">...</neura::modal>
<neura::modal size="md" entangle="showModal">...</neura::modal>
<neura::modal size="lg" entangle="showModal">...</neura::modal>
<neura::modal size="xl" entangle="showModal">...</neura::modal>
<neura::modal size="2xl" entangle="showModal">...</neura::modal>
<neura::modal size="3xl" entangle="showModal">...</neura::modal>
<neura::modal size="4xl" entangle="showModal">...</neura::modal>
<neura::modal size="5xl" entangle="showModal">...</neura::modal>
<neura::modal size="6xl" entangle="showModal">...</neura::modal>
<neura::modal size="7xl" entangle="showModal">...</neura::modal>
<neura::modal size="full" entangle="showModal">...</neura::modal>Modal Sections
The modal is composed of three main sections: header, body, and footer:
Header
Body
Footer
<neura::modal entangle="showModal">
<neura::modal.header>
<neura::heading>Title</neura::heading>
</neura::modal.header>
<neura::modal.body>
<!-- Content -->
</neura::modal.body>
<neura::modal.footer>
<!-- Actions -->
</neura::modal.footer>
</neura::modal>Footer Alignment
Alignez les boutons du footer avec l'attribut align:
<neura::modal.footer align="left">...</neura::modal.footer>
<neura::modal.footer align="center">...</neura::modal.footer>
<neura::modal.footer align="right">...</neura::modal.footer>
<neura::modal.footer align="between">...</neura::modal.footer>Closeable Header
Disable the close button in the header with closeable="false":
<neura::modal.header :closeable="false">
<neura::heading>Title</neura::heading>
</neura::modal.header>Persistent Modal
Empêchez la fermeture du modal avec persistent="true" (ne peut pas être fermé avec Escape ou backdrop):
<neura::modal entangle="showModal" :persistent="true">
<!-- Modal content -->
</neura::modal>Close Options
Control how the modal can be closed:
Disable Backdrop Close
Disable Escape Close
<!-- Disable closing on backdrop click -->
<neura::modal :closeOnBackdrop="false" entangle="showModal">...</neura::modal>
<!-- Disable closing with Escape -->
<neura::modal :closeOnEscape="false" entangle="showModal">...</neura::modal>Use Cases
Confirmation Modal
Form Modal
Best Practices
✓ Do
- Use modals for important actions that require user attention
- Always provide a clear way to close the modal (close button or Cancel button)
- Use appropriate sizes based on content (don't use a modal that's too wide for little content)
- Organize content with header, body, and footer for a clear structure
- Use entangle with Livewire for better state synchronization
✗ Don't
- Don't create modals that are too wide or contain too much information
- Don't use persistent modals unless absolutely necessary
- Don't forget to provide a way to close the modal
- Don't use modals for content that could be on the page
- Don't create stacked modals (avoid modals within modals)
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| name | string|null | null | Modal name for management with Livewire (uses modals.{name}.open) |
| open | bool | false | Initial open state of the modal |
| size | string | 'md' | Modal size. Values: 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full' |
| closeable | bool | true | Afficher le bouton de fermeture dans le header |
| persistent | bool | false | Prevents closing with Escape or backdrop |
| closeOnBackdrop | bool | true | Allow closing by clicking on backdrop |
| closeOnEscape | bool | true | Allow closing with Escape key |
| entangle | string|null | null | Propriété Livewire à synchroniser avec l'état d'ouverture (ex: "showModal") |
| maxWidth | string|null | null | Largeur maximale personnalisée (ex: "800px", "50rem") - ignore la prop size si définie |
Modal Sub-components Properties
Header Properties
| Property | Type | Default | Description |
|---|---|---|---|
| closeable | bool | true | Display close button in header |
Body Properties
| Property | Type | Default | Description |
|---|---|---|---|
| padding | bool | true | Add padding to body (p-6) |
Footer Properties
| Property | Type | Default | Description |
|---|---|---|---|
| align | string | 'right' | Button alignment. Values: 'left', 'center', 'right', 'between' |