Modal
The Modal component displays an overlay panel above the main content. It is designed for dialogs, contextual messages, forms or alerts requiring direct interaction.
The modal can be centered, fixed at the top or bottom of the screen, and closes in different ways depending on the options activated (outside click, Escape key, etc.).
A simple example of modal control with an open variable. It is displayed at the center of the screen with a default size.
This example shows the contain option, which allows long content to be contained in a scrollable zone, ideal for modals with lots of text or forms.
Prop size lets you control the overall size of the modal: from xs to full, depending on how much space you want to give it.
The density option adjusts internal spacing. compact reduces margins and paddings, while comfortable adds air, for a more spacious look.
You can position the modal at the top, center (default) or bottom of the screen. This example shows all three options.
When persistent is enabled, the modal is not closed by clicking outside or pressing Escape. Perfect for cases where confirmation is mandatory.
By enabling closeWithEsc, the modal can be closed with the Escape key. This example illustrates this keyboard interaction.
Several modals can be displayed at the same time, stacked. This example shows how to correctly manage z-indexes and focus between multiple windows.
Complement the use of Modals with Dialog for confirmations or Popover for light details.