Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Overlay

Dialog

The dialog.root contains all the parts of a dialog.

The dialog.trigger wraps the control that will open the dialog.

The dialog.content contains the content of the dialog.

The dialog.title is a title that is announced when the dialog is opened.

The dialog.description is a description that is announced when the dialog is opened.

The dialog.close wraps the control that will close the dialog.

rx.dialog.root(
    rx.dialog.trigger(rx.button("Open Dialog")),
    rx.dialog.content(
        rx.dialog.title("Welcome to Reflex!"),
        rx.dialog.description(
            "This is a dialog component. You can render anything you want in here.",
        ),
        rx.dialog.close(
            rx.button("Close Dialog", size="3"),
        ),
    ),
)

In context examples

rx.dialog.root(
    rx.dialog.trigger(rx.button("Edit Profile", size="4")),
    rx.dialog.content(
        rx.dialog.title("Edit Profile"),
        rx.dialog.description(
            "Change your profile details and preferences.",
            size="2",
            margin_bottom="16px",
        ),
        rx.flex(
            rx.text(
                "Name",
                as_="div",
                size="2",
                margin_bottom="4px",
                weight="bold",
            ),
            rx.input(
                default_value="Freja Johnson",
                placeholder="Enter your name",
            ),
            rx.text(
                "Email",
                as_="div",
                size="2",
                margin_bottom="4px",
                weight="bold",
            ),
            rx.input(
                default_value="freja@example.com",
                placeholder="Enter your email",
            ),
            direction="column",
            spacing="3",
        ),
        rx.flex(
            rx.dialog.close(
                rx.button(
                    "Cancel",
                    color_scheme="gray",
                    variant="soft",
                ),
            ),
            rx.dialog.close(
                rx.button("Save"),
            ),
            spacing="3",
            margin_top="16px",
            justify="end",
        ),
    ),
)

rx.dialog.root(
    rx.dialog.trigger(rx.button("View users", size="4")),
    rx.dialog.content(
        rx.dialog.title("Users"),
        rx.dialog.description(
            "The following users have access to this project."
        ),
        rx.inset(
            rx.table.root(
                rx.table.header(
                    rx.table.row(
                        rx.table.column_header_cell(
                            "Full Name"
                        ),
                        rx.table.column_header_cell(
                            "Email"
                        ),
                        rx.table.column_header_cell(
                            "Group"
                        ),
                    ),
                ),
                rx.table.body(
                    rx.table.row(
                        rx.table.row_header_cell(
                            "Danilo Rosa"
                        ),
                        rx.table.cell("danilo@example.com"),
                        rx.table.cell("Developer"),
                    ),
                    rx.table.row(
                        rx.table.row_header_cell(
                            "Zahra Ambessa"
                        ),
                        rx.table.cell("zahra@example.com"),
                        rx.table.cell("Admin"),
                    ),
                ),
            ),
            side="x",
            margin_top="24px",
            margin_bottom="24px",
        ),
        rx.flex(
            rx.dialog.close(
                rx.button(
                    "Close",
                    variant="soft",
                    color_scheme="gray",
                ),
            ),
            spacing="3",
            justify="end",
        ),
    ),
)

Events when the Dialog opens or closes

The on_open_change event is called when the open state of the dialog changes. It is used in conjunction with the open prop, which is passed to the event handler.

Number of times dialog opened or closed: 0

Dialog open: false

class DialogState(rx.State):
    num_opens: int = 0
    opened: bool = False

    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


def dialog_example():
    return rx.flex(
        rx.heading(
            f"Number of times dialog opened or closed: {DialogState.num_opens}"
        ),
        rx.heading(f"Dialog open: {DialogState.opened}"),
        rx.dialog.root(
            rx.dialog.trigger(rx.button("Open Dialog")),
            rx.dialog.content(
                rx.dialog.title("Welcome to Reflex!"),
                rx.dialog.description(
                    "This is a dialog component. You can render anything you want in here.",
                ),
                rx.dialog.close(
                    rx.button("Close Dialog", size="3"),
                ),
            ),
            on_open_change=DialogState.count_opens,
        ),
        direction="column",
        spacing="3",
    )

API Reference

DialogRoot

Root component for Dialog.

Prop	Type	Description	Values
`open`	bool	The controlled open state of the dialog.

Event Triggers

Trigger	Description
`on_open_change`	The on_open_change event handler is called when the open state of the component changes.

DialogTrigger

Trigger an action or event, to open a Dialog modal.

Props

No component specific props

Event Triggers

See the full list of default event triggers

DialogTitle

Title component to display inside a Dialog modal.

Props

No component specific props

Event Triggers

See the full list of default event triggers

DialogContent

Content component to display inside a Dialog modal.

Prop	Type	Description	Values
`size`	Literal	DialogContent size "1" - "4"

Event Triggers

Trigger	Description
`on_open_auto_focus`	The on_open_auto_focus event handler is called when the component opens and the focus is returned to the first item.
`on_close_auto_focus`	The on_close_auto_focus event handler is called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
`on_interact_outside`	The on_interact_outside event handler is called when the user interacts outside the component.