Plume UI

Modal

A dialog box or popup window that is displayed on top of the current page.

Examples

Properties

Prop Type Default Description
name string - Required. Unique identifier for the modal.
show boolean false Initial visibility state.
maxWidth string 2xl Max width: sm, md, lg, xl, 2xl.

Usage

Triggering the Modal

blade 
<x-plume::button x-on:click="$dispatch('open-modal', 'confirm-delete')">
    Delete Item
</x-plume::button>

Modal Component

blade 
<x-plume::modal name="confirm-delete">
    <x-plume::modal.header>
        <x-plume::modal.title>Confirm Deletion</x-plume::modal.title>
    </x-plume::modal.header>
    <x-plume::modal.content>
        Are you sure you want to delete this?
    </x-plume::modal.content>
    <x-plume::modal.footer>
        <x-plume::button style="outline" x-on:click="show = false">Cancel</x-plume::button>
        <x-plume::button style="destructive">Delete</x-plume::button>
    </x-plume::modal.footer>
</x-plume::modal>