---
title: Modal Blade component
---
## Overview
The modal component is able to open a dialog window or slide-over with any content:
```blade
Open modal
{{-- Modal content --}}
```
## 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
{{-- Modal content --}}
```
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
$this->dispatch('open-modal', id: 'edit-user');
```
Or from Alpine.js:
```php
$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
Modal heading
{{-- Modal content --}}
```
## Adding a description to a modal
You can add a description, below the heading, to a modal by using the `description` slot:
```blade
Modal heading
Modal description
{{-- Modal content --}}
```
## Adding an icon to a modal
You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a modal by using the `icon` attribute:
```blade
Modal heading
{{-- Modal content --}}
```
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
Modal heading
{{-- Modal content --}}
```
## Adding a footer to a modal
You can add a footer to a modal by using the `footer` slot:
```blade
{{-- Modal content --}}
{{-- Modal footer content --}}
```
Alternatively, you can add actions into the footer by using the `footerActions` slot:
```blade
{{-- Modal content --}}
{{-- Modal footer actions --}}
```
## 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
{{-- Modal content --}}
```
## 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
{{-- Slide-over content --}}
```
## 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
Modal heading
{{-- Modal content --}}
```
## 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
{{-- Modal content --}}
{{-- Modal footer content --}}
```
## 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
{{-- Modal content --}}
```
## 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
{{-- Modal content --}}
```
## 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
{{-- Modal content --}}
```
## 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
Modal heading
{{-- Modal content --}}
```
## 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
{{-- Modal content --}}
```
## 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
Open modal
{{-- Modal content --}}
```