A modal dialog is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is inert, meaning that users cannot interact with it.

class ModalState(rx.State):
    show: bool = False

    def change(self):
        self.show = not (self.show)


def modal_example():
    return rc.vstack(
        rc.button("Confirm", on_click=ModalState.change),
        rc.modal(
            rc.modal_overlay(
                rc.modal_content(
                    rc.modal_header("Confirm"),
                    rc.modal_body(
                        "Do you want to confirm example?"
                    ),
                    rc.modal_footer(
                        rc.button(
                            "Close",
                            on_click=ModalState.change,
                        )
                    ),
                )
            ),
            is_open=ModalState.show,
        ),
    )

rc.Modal

The wrapper that provides context for its children.

PropType | ValuesDefault
is_open
bool
allow_pinch_zoom
bool
auto_focus
bool
block_scroll_on_mount
bool
close_on_esc
bool
close_on_overlay_click
bool
is_centered
bool
lock_focus_across_frames
bool
motion_preset
str
preserve_scroll_bar_gap
bool
return_focus_on_close
bool
size
"sm" | "md" | "lg" | ...
use_inert
bool

Event Triggers

See the full list of default event triggers
TriggerDescription
on_close Fired when the modal is closing.
on_close_complete Fired when the modal is closed and the exit animation is complete.
on_esc Fired when the Esc key is pressed.
on_overlay_click Fired when the overlay is clicked.

rc.ModalOverlay

The dimmed overlay behind the modal dialog.

Props

No component specific props

rc.ModalContent

The container for the modal dialog's content.

Props

No component specific props

rc.ModalHeader

The header that labels the modal dialog.

Props

No component specific props

rc.ModalBody

The wrapper that houses the modal's main content.

Props

No component specific props

rc.ModalFooter

The footer that houses the modal events.

Props

No component specific props