︲

︲

Dialog

Custom dialog component.

Installation

Copy the following code into your app directory.

uv

buridan add component dialog
Usage
from components.ui.dialog import dialog
Anatomy

Use the following composition to build a Dialog

dialog.root( dialog.trigger(), dialog.portal( dialog.backdrop(), dialog.popup( dialog.title(), dialog.description(), dialog.close(), ), ), )
Examples

Below are examples demonstrating how the component can be used.

High Level

Uses the simplified dialog() API with trigger, title, description, and content props for quick implementation.

import reflex as rx

from components.ui.button import button
from components.ui.dialog import dialog


def dialog_high_level():
    return dialog(
        trigger=button("Open Dialog", variant="outline"),
        title="Are you absolutely sure?",
        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
        content=rx.flex(
            button("Cancel", variant="outline", class_name="flex-1"),
            button("Continue", class_name="flex-1"),
            class_name="flex gap-2 w-full",
        ),
        class_name="!w-full max-w-md",
    )
Low Level

Uses the low-level dialog.root(), dialog.trigger(), dialog.portal() etc. for full control over structure and styling

import reflex as rx

from components.ui.button import button
from components.ui.dialog import dialog
from components.ui.input import input


def dialog_low_level():
    return dialog.root(
        dialog.trigger(render_=button("Open Dialog")),
        dialog.portal(
            dialog.backdrop(class_name="backdrop-blur-[5px]"),
            dialog.popup(
                rx.el.div(
                    rx.el.div(
                        dialog.title("Edit Profile"),
                        dialog.close(
                            render_=button(
                                rx.icon("x", class_name="size-4"),
                                variant="ghost",
                                size="icon-sm",
                                class_name="text-secondary-11",
                            ),
                        ),
                        class_name="flex justify-between items-baseline gap-1",
                    ),
                    dialog.description(
                        "Make changes to your profile here. Click save when you're done."
                    ),
                    class_name="flex flex-col gap-2",
                ),
                # Content section
                rx.el.div(
                    rx.el.div(
                        rx.el.p("Name", class_name="text-sm font-medium mb-2"),
                        input(placeholder="Enter your name"),
                    ),
                    rx.el.div(
                        rx.el.p("Email", class_name="text-sm font-medium mb-2"),
                        input(placeholder="Enter your email", type="email"),
                    ),
                    rx.el.div(
                        dialog.close(
                            render_=button(
                                "Cancel", variant="outline", class_name="flex-1"
                            ),
                        ),
                        button("Save Changes", class_name="flex-1"),
                        class_name="flex gap-2 w-full",
                    ),
                    class_name="flex flex-col gap-4",
                ),
                class_name="!w-full max-w-lg",
            ),
        ),
    )