Modal

In progress
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.Header>...</Modal.Header>
  </Modal.Panel>
</Modal>

Default

Example with big content

Example with styled content

Example with select

Modal props
Name Type Required Default Description
backdrop slot Yes - Backdrop of Modal element, see Modal.Backdrop
panel slot Yes - Content of Modal element, see Modal.Panel
is_open boolean No false Whether the Modal is open or not
on_close event No - Handler for open/close of the element
Modal.Panel
Name Type Required Default Description
header slot No - Header of Modal element, see Modal.Header
default slot No - Content of Modal element
class css_class Yes - Tailwind classes for customization of Panel
Modal.Header
Name Type Required Default Description
default slot No - Holds title of Modal.Header
title string No - Title of Modal.Header
has_divider boolean No false Whether the Modal header has divider
has_close boolean No false Whether the Modal header has "close" icon
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