The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.
Get started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.
Default modal
Modal visibility (open/close) is controlled by the `open` property. You can bind it to a variable that other element (usually button) will toggle. You can also use the `open=true` attribute to show open the modal by default. Opening and closing the modal will trigger the `show` and `close` events.
An option of automatic closing of the modal can be enabled by setting the `autoclose` property. Any `button` element put in the modal will close it on click.
Closing by clicking outside
You can use the `outsideclose` prop to allow the user to close the modal by clicking outside of it.
Pop-up modal
You can use this modal example to show a pop-up decision dialog to your users especially when deleting an item and making sure if the user really wants to do that by double confirming.
Notice lack of the `footer` slot.
Form element
Use this modal example with form input element to receive information from your users with the advantage of not having to link to another page but keeping the user on the currently active page. A great example would be a login or a register form.
Crypto wallet
Use this web3 modal component to show crypto wallet connection options like MetaMask or WalletConnect when building a website based on NFT authentication and collectibles.
Sizes
You can use five different modal sizing options starting from extra small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.