New components library - Native UI

︲

︲

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component dialog
from components.ui.dialog import dialog

Anatomy

Use the following composition to build a Dialog component.

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

Examples

Custom Close Button

Replace the default close control with your own button. Make sure to pass in dialog.class_names.CLOSE to the rendered component to ensure proper positioning.

import reflex as rx

from components.icons.hugeicon import hi
from components.ui.button import button
from components.ui.dialog import dialog
from components.ui.input import input


def dialog_close_button() -> rx.Component:
    return dialog.root(
        dialog.trigger(render_=button("Share", variant="outline")),
        dialog.portal(
            dialog.backdrop(),
            dialog.popup(
                dialog.header(
                    dialog.title("Share link"),
                    dialog.description(
                        "Anyone who has this link will be able to view this."
                    ),
                ),
                rx.el.div(
                    rx.el.div(
                        rx.el.label("Link", html_for="link", class_name="sr-only"),
                        input(
                            id="link",
                            default_value="https://ui.buridan.com/docs/getting-started/installation",
                            read_only=True,
                        ),
                        class_name="grid flex-1 gap-2",
                    ),
                    class_name="flex items-center gap-2",
                ),
                dialog.footer(
                    dialog.close(render_=button("Close", type="button")),
                    class_name="sm:justify-start",
                ),
                dialog.close(
                    render_=button(
                        hi("Cancel01Icon", class_name="size-4"),
                        variant="ghost",
                        size="icon-sm",
                        class_name=dialog.class_names.CLOSE,
                    )
                ),
                class_name="sm:max-w-md",
            ),
        ),
    )

No Close Button

To omit the top-right close cross icon from your dialog layout, simply exclude the dialog.close() sub-component containing the icon button from your composition tree.

import reflex as rx

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


def dialog_no_close_button() -> rx.Component:
    return dialog.root(
        dialog.trigger(render_=button("No Close Button", variant="outline")),
        dialog.portal(
            dialog.backdrop(),
            dialog.popup(
                dialog.header(
                    dialog.title("No Close Button"),
                    dialog.description(
                        "This dialog doesn't have a close button in the top-right corner."
                    ),
                ),
            ),
        ),
    )

Sticky Footer

Keep actions visible while the content scrolls.

import reflex as rx

from components.icons.hugeicon import hi
from components.ui.button import button
from components.ui.dialog import dialog


def dialog_sticky_footer() -> rx.Component:
    return dialog.root(
        dialog.trigger(render_=button("Sticky Footer", variant="outline")),
        dialog.portal(
            dialog.backdrop(),
            dialog.popup(
                dialog.header(
                    dialog.title("Sticky Footer"),
                    dialog.description(
                        "This dialog has a sticky footer that stays visible while the content scrolls."
                    ),
                ),
                rx.el.div(
                    *[
                        rx.el.p(
                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do "
                            "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
                            "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
                            "nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in "
                            "reprehenderit in voluptate velit esse cillum dolore eu fugiat "
                            "nulla pariatur. Excepteur sint occaecat cupidatat non proident, "
                            "sunt in culpa qui officia deserunt mollit anim id est laborum.",
                            class_name="mb-4 leading-normal",
                        )
                        for _ in range(10)
                    ],
                    class_name="-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4",
                ),
                dialog.footer(
                    dialog.close(render_=button("Close", variant="outline")),
                ),
                dialog.close(
                    render_=button(
                        hi("Cancel01Icon", class_name="size-4"),
                        variant="ghost",
                        size="icon-sm",
                        class_name=dialog.class_names.CLOSE,
                    )
                ),
            ),
        ),
    )