> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Modal Blade component

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/components/modal.md).

## Introduction

The modal component is able to open a dialog window or slide-over with any content:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal>
    <x-slot name="trigger">
        <x-filament::button>
            Open modal
        </x-filament::button>
    </x-slot>

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

Loading preview

![A modal with heading, description and footer actions](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/simple.jpg)

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```php theme={"theme":"gruvbox-dark-hard"}
$this->dispatch('open-modal', id: 'edit-user');
```

Or from Alpine.js:

```js theme={"theme":"gruvbox-dark-hard"}
$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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal>
    <x-slot name="heading">
        Modal heading
    </x-slot>

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

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

Loading preview

![A modal with heading and description](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/heading.jpg)

## Adding an icon to a modal

You can add an [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md) to a modal by using the `icon` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal
    icon="heroicon-o-exclamation-triangle"
    icon-color="danger"
>
    <x-slot name="heading">
        Modal heading
    </x-slot>

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

Loading preview

![A modal with a danger icon](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/icon.jpg)

## Adding a footer to a modal

You can add a footer to a modal by using the `footer` slot:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal>
    {{-- Modal content --}}

    <x-slot name="footerActions">
        {{-- Modal footer actions --}}
    </x-slot>
</x-filament::modal>
```

Loading preview

![A modal with a custom footer](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/footer.jpg)

## 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](#changing-the-modal-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`:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal alignment="center">
    {{-- Modal content --}}
</x-filament::modal>
```

Loading preview

![A modal with center-aligned content](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/alignment.jpg)

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal slide-over>
    {{-- Slide-over content --}}
</x-filament::modal>
```

Loading preview

![A slide-over modal](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/slide-over.jpg)

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal sticky-header>
    <x-slot name="heading">
        Modal heading
    </x-slot>

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

Loading preview

![A modal with a sticky header](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/sticky-header.jpg)

## Making the modal footer sticky

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:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal sticky-footer>
    {{-- Modal content --}}

    <x-slot name="footer">
        {{-- Modal footer content --}}
    </x-slot>
</x-filament::modal>
```

Loading preview

![A modal with a sticky footer](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/sticky-footer.jpg)

## 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](https://tailwindcss.com/docs/max-width). The options are `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, and `screen`:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::modal width="5xl">
    {{-- Modal content --}}
</x-filament::modal>
```

Loading preview

![A modal with a custom width](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/modal/width.jpg)

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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](https://github.com/filamentphp/filament/edit/4.x/docs/12-components/03-modal.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.