Phara UI

Phara UI v2.x

Modal

A flexible and customizable dialog component for user interaction.

Basic

Default modal with a title and content.

Blade

<x-ui::button x-on:click="$dispatch('open-modal', { id: 'basic-modal' })">
    Open Modal
</x-ui::button>

<x-ui::modal id="basic-modal" title="Welcome">
    This is a basic modal example.
</x-ui::modal>

Sizes

Use the maxWidth prop to control the width of the modal.

Blade

<x-ui::modal id="sm-modal" maxWidth="sm" title="Small Modal">...</x-ui::modal>
<x-ui::modal id="lg-modal" maxWidth="lg" title="Large Modal">...</x-ui::modal>

With Footer

Add actions to the bottom of the modal using the footer slot.

Blade

<x-ui::modal id="footer-modal" title="Actions Required">
    Are you sure you want to proceed?
    <x-slot name="footer">
        <x-ui::button variant="outline" x-on:click="$dispatch('close-modal', { id: 'footer-modal' })">Cancel</x-ui::button>
        <x-ui::button variant="primary">Confirm</x-ui::button>
    </x-slot>
</x-ui::modal>

Triggering Programmatically

You can open or close any modal by dispatching window events.

Use Alpine.js's $dispatch helper or standard JavaScript window.dispatchEvent to control modals from anywhere in your application.

Javascript

// To open a modal
$dispatch('open-modal', { id: 'modal-id' });

// To close a modal
$dispatch('close-modal', { id: 'modal-id' });