Modal

In progress
Aria
RTL

A modal is an interface element that appears over other content. It requires an interaction from the user before they can return to whatever is underneath.

Modal

Anatomy

 
<Modal>
  <Modal.Backdrop />
  <Modal.Panel />
</Modal>

Default

Example with big content

Example with styled content

Example with select

Modal props
Name Type Required Default Description
is_open boolean No false Whether the Modal is open or not
on_close event No - Handler for open/close of the element
backdrop slot Yes - Backdrop of Modal element, see Modal.Backdrop
panel slot Yes - Content of Modal element, see Modal.Panel
Modal.Panel
Name Type Required Default Description
default slot No - Content of Modal element
class css_class Yes - Tailwind classes for customization of Panel
Modal.Backdrop
Name Type Required Default Description
class css_class Yes - Tailwind classes for customization of Backdrop