Components
Modal
Guides
Installation Principles Patterns Customization
Layouts
Header Sidebar
Components
Accordion Autocomplete Badge Button Breadcrumbs Card Checkbox Command Context Dropdown Field Heading Icon Input Modal Navbar Radio Select Separator Switch Table Tabs Textarea Toast Tooltip

Modal

Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.

Update profile
Make changes to your personal details.
Name
Date of birth

Livewire methods

In addition to triggering modals in your Blade templates, you can also control them directly from Livewire.

Consider a "confirm" modal in your Blade template like so:

You can now open and close this modal from your Livewire component using the following methods:

Data binding

If you prefer, you can bind a Livewire property directly to a modal to control its states from your Livewire component.

Consider a confirmation modal in your Blade template like so:

It's important to add the .self modifier to the wire:model attribute to prevent nested elements from dispatching input events that would interfere with the state of the modal.

You can now open and close this modal from your Livewire component by toggling the wire:model property.

One advantage of this approach is being able to control the state of the modal directly from the browser without making a server roundtrip:

Confirmation

Prompt a user for confirmation before performing a dangerous action.

Delete project?

You're about to delete this project.

This action cannot be reversed.
Log in to view

Flyout

Use the "flyout" variant for a more anchored and long-form dialog.

Update profile
Make changes to your personal details.
Name
Date of birth
Log in to view
Copyright © 2024 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie