Modal

Modal Component

The Modal component provides a flexible dialog window with built-in show/hide transitions, keyboard accessibility, and dark mode support. It includes separate subcomponents for content, header, and footer, allowing for customizable structure and behavior.

Example Usage

<x-modal wire:model="isModalOpen">
    <x-slot:trigger>
        <x-button @click="modalIsOpen = true">
            Open Modal
        </x-button>
    </x-slot:trigger>

    <x-modal.content>
        <x-modal.header :useWireModal="false">
            Modal Title
        </x-modal.header>

        <div class="p-4">
            <span>Hello World</span>
        </div>

        <x-modal.footer>
            <button x-on:click="modalIsOpen = false" type="button">
                Remind me later
            </button>
        </x-modal.footer>
    </x-modal.content>
</x-modal>

Props

Modal (index.blade.php)

• defaultOpen (bool, default: false)
  Controls whether the modal is open by default when not bound to a Livewire model.

• trigger (Blade slot|null)
  The trigger element (e.g., a button) that toggles the modal visibility.

Modal.Content (content.blade.php)

No explicit props. Wraps the main content of the modal and applies transitions and styling.

Modal.Header (header.blade.php)

• showCloseButton (bool, default: true)
  Whether to display the close button in the modal header.

• useWireModal (bool, default: true)
  Controls if the close button uses Livewire's closeModal method or Alpine.js to close.

• closeIcon (string, default: "icon-x")
  CSS class for the icon used in the close button.

Modal.Footer (footer.blade.php)

No explicit props. Contains actions or buttons aligned properly in the footer area.

Overview

This Modal component offers a reusable dialog window with smooth Alpine.js transitions and accessibility features such as keyboard dismissal (Esc key) and click-away close. It integrates with Livewire for reactive state management but also supports manual control via Alpine.js. The subcomponents (header, content, footer) let you structure modal dialogs flexibly with consistent styling and dark mode support.