Skip to main content

​
Introduction

The modal component is able to open a dialog window or slide-over with any content: 
<x-filament::modal>
    <x-slot name="trigger">
        <x-filament::button>
            Open modal
        </x-filament::button>
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

​
Controlling a modal from JavaScript

You can use the trigger slot to render a button that opens the modal. However, this is not required. You have complete control over when the modal opens and closes through JavaScript. First, give the modal an ID so that you can reference it: 
<x-filament::modal id="edit-user">
    {{-- Modal content --}}
</x-filament::modal>
Now, you can dispatch an open-modal or close-modal browser event, passing the modal’s ID, which will open or close the modal. For example, from a Livewire component: 
$this->dispatch('open-modal', id: 'edit-user');
Or from Alpine.js: 
$dispatch('open-modal', { id: 'edit-user' })

​
Adding a heading to a modal

You can add a heading to a modal by using the heading slot: 
<x-filament::modal>
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

​
Adding a description to a modal

You can add a description, below the heading, to a modal by using the description slot: 
<x-filament::modal>
    <x-slot name="heading">
        Modal heading
    </x-slot>

    <x-slot name="description">
        Modal description
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

​
Adding an icon to a modal

You can add an icon to a modal by using the icon attribute: 
<x-filament::modal icon="heroicon-o-information-circle">
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>
By default, the color of an icon is “primary”. You can change it to be danger, gray, info, success or warning by using the icon-color attribute: 
<x-filament::modal
    icon="heroicon-o-exclamation-triangle"
    icon-color="danger"
>
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>
You can add a footer to a modal by using the footer slot: 
<x-filament::modal>
    {{-- Modal content --}}
    
    <x-slot name="footer">
        {{-- Modal footer content --}}
    </x-slot>
</x-filament::modal>
Alternatively, you can add actions into the footer by using the footerActions slot: 
<x-filament::modal>
    {{-- Modal content --}}
    
    <x-slot name="footerActions">
        {{-- Modal footer actions --}}
    </x-slot>
</x-filament::modal>

​
Changing the modal’s alignment

By default, modal content will be aligned to the start, or centered if the modal is xs or sm in width. If you wish to change the alignment of content in a modal, you can use the alignment attribute and pass it start or center: 
<x-filament::modal alignment="center">
    {{-- Modal content --}}
</x-filament::modal>

​
Using a slide-over instead of a modal

You can open a “slide-over” dialog instead of a modal by using the slide-over attribute: 
<x-filament::modal slide-over>
    {{-- Slide-over content --}}
</x-filament::modal>

​
Making the modal header sticky

The header of a modal scrolls out of view with the modal content when it overflows the modal size. However, slide-overs have a sticky modal that’s always visible. You may control this behavior using the sticky-header attribute: 
<x-filament::modal sticky-header>
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>
The footer of a modal is rendered inline after the content by default. Slide-overs, however, have a sticky footer that always shows when scrolling the content. You may enable this for a modal too using the sticky-footer attribute: 
<x-filament::modal sticky-footer>
    {{-- Modal content --}}
    
    <x-slot name="footer">
        {{-- Modal footer content --}}
    </x-slot>
</x-filament::modal>

​
Changing the modal width

You can change the width of the modal by using the width attribute. Options correspond to Tailwind’s max-width scale. The options are xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, and screen: 
<x-filament::modal width="5xl">
    {{-- Modal content --}}
</x-filament::modal>

​
Closing the modal by clicking away

By default, when you click away from a modal, it will close itself. If you wish to disable this behavior for a specific action, you can use the close-by-clicking-away attribute: 
<x-filament::modal :close-by-clicking-away="false">
    {{-- Modal content --}}
</x-filament::modal>

​
Closing the modal by escaping

By default, when you press escape on a modal, it will close itself. If you wish to disable this behavior for a specific action, you can use the close-by-escaping attribute: 
<x-filament::modal :close-by-escaping="false">
    {{-- Modal content --}}
</x-filament::modal>

​
Hiding the modal close button

By default, modals with a header have a close button in the top right corner. You can remove the close button from the modal by using the close-button attribute: 
<x-filament::modal :close-button="false">
    <x-slot name="heading">
        Modal heading
    </x-slot>

    {{-- Modal content --}}
</x-filament::modal>

​
Preventing the modal from autofocusing

By default, modals will autofocus on the first focusable element when opened. If you wish to disable this behavior, you can use the autofocus attribute: 
<x-filament::modal :autofocus="false">
    {{-- Modal content --}}
</x-filament::modal>

​
Disabling the modal trigger button

By default, the trigger button will open the modal even if it is disabled, since the click event listener is registered on a wrapping element of the button itself. If you want to prevent the modal from opening, you should also use the disabled attribute on the trigger slot: 
<x-filament::modal>
    <x-slot name="trigger" disabled>
        <x-filament::button :disabled="true">
            Open modal
        </x-filament::button>
    </x-slot>
    {{-- Modal content --}}
</x-filament::modal>
Edit this page on GitHub

Sponsored by

KirschbaumCMS MaxMailtrapBaiz.aiAgiledropSerpApi