Modal

Accessible dialog windows supporting standard forms, centered alert popups, destructive prompts, and wide modal layout.

Component Syntax

blade

<x-aura::button variant="primary" x-on:click="$dispatch('open-modal', 'demo-modal')">
    Launch
</x-aura::button>

<x-aura::modal name="demo-modal" title="Modal Title">
    <x-aura::text size="sm">
        Modal body content.
    </x-aura::text>
</x-aura::modal>

1. Confirmation Dialog

blade

<x-aura::button variant="primary" x-on:click="$dispatch('open-modal', 'deploy-modal')">
    Deploy
</x-aura::button>

<x-aura::modal name="deploy-modal" title="Confirm Deployment" description="Deploying updates to production.">
    <x-aura::text size="sm">
        This action will release version v1.6.1 to all active tenant nodes.
    </x-aura::text>

    <x-slot:footer>
        <x-aura::button variant="ghost" size="sm" x-on:click="$dispatch('close-modal', 'deploy-modal')">
            Cancel
        </x-aura::button>

        <x-aura::button variant="primary" size="sm" x-on:click="$dispatch('close-modal', 'deploy-modal')">
            Confirm
        </x-aura::button>
    </x-slot:footer>
</x-aura::modal>

2. Form Input Dialog (maxWidth=lg)

blade

<x-aura::button variant="outline" x-on:click="$dispatch('open-modal', 'create-user-modal')">
    Invite
</x-aura::button>

<x-aura::modal name="create-user-modal" title="Invite Team Member" maxWidth="lg">
    <x-aura::flex direction="col" gap="4">
        <x-aura::field label="Email Address">
            <x-aura::input placeholder="sarah@company.com" icon="mail" />
        </x-aura::field>

        <x-aura::field label="Access Role">
            <x-aura::select>
                <option>Collaborator (Read & Write)</option>
                <option>Administrator (Full Access)</option>
            </x-aura::select>
        </x-aura::field>
    </x-aura::flex>

    <x-slot:footer>
        <x-aura::button variant="ghost" size="sm" x-on:click="$dispatch('close-modal', 'create-user-modal')">
            Cancel
        </x-aura::button>

        <x-aura::button variant="primary" size="sm" x-on:click="$dispatch('close-modal', 'create-user-modal')">
            Send
        </x-aura::button>
    </x-slot:footer>
</x-aura::modal>

3. Destructive Alert Dialog

blade

<x-aura::button variant="danger" x-on:click="$dispatch('open-modal', 'delete-project-modal')">
    Delete
</x-aura::button>

<x-aura::modal name="delete-project-modal" variant="danger" title="Delete Project Repository" description="This operation cannot be undone.">
    <x-slot:footer>
        <x-aura::button variant="ghost" size="sm" x-on:click="$dispatch('close-modal', 'delete-project-modal')">
            Cancel
        </x-aura::button>

        <x-aura::button variant="danger" size="sm" x-on:click="$dispatch('close-modal', 'delete-project-modal')">
            Delete
        </x-aura::button>
    </x-slot:footer>
</x-aura::modal>

Component Props

Available properties and configurations for the modal component.

Prop	Default	Available Values
name	modal	Name identifier string
maxWidth	md	sm md lg xl 2xl full
variant	default	default centered danger success

Aura Wire

Component Library

Modal

Component Syntax

1. Confirmation Dialog

Confirm Deployment

2. Form Input Dialog (maxWidth=lg)

Invite Team Member

3. Destructive Alert Dialog

Delete Project Repository

Component Props

Toast

Sheet

Aura Wire