ui.dialog

Dialog

A centred modal with backdrop, Escape and focus trap — opened with .open(), closed from any button inside it.

Confirm a destructive action

The dialog is declared once; the trigger calls dialog.open() and every button inside can call dialog.close(). No state to declare.

Delete “Website redesign”?

The 14 boards, 212 cards and every comment go with it. This cannot be undone.

def confirm_delete() -> None:
    dialog = ui.dialog(title="Delete “Website redesign”?", width="sm")
    with dialog, ui.vstack(gap="md"):
        ui.text("The 14 boards, 212 cards and every comment go with it. "
                "This cannot be undone.", color="muted")
        with ui.hstack(gap="sm", justify="end"):
            ui.button("Cancel", variant="ghost", on_click=dialog.close())
            ui.button("Delete project", color="error", icon_left="trash-2",
                      on_click=dialog.close())
    ui.button("Delete project", variant="outline", color="error",
              icon_left="trash-2", on_click=dialog.open())

One confirmation per row

A list on on_click runs the Python handler AND closes the dialog at once; the list re-renders when the key is gone.

Revoke the Production key?

Apps using it will stop working at once.

Production

Revoke the Staging key?

Apps using it will stop working at once.

Staging

Revoke the CI pipeline key?

Apps using it will stop working at once.

CI pipeline

class ApiKeys(PageState):
    names: list = field(default_factory=lambda: ["Production", "Staging",
                                                  "CI pipeline"])


def revoke(name: str) -> None:
    keys = ApiKeys()
    keys.names = [key for key in keys.names if key != name]


def restore_keys() -> None:
    ApiKeys().names = ["Production", "Staging", "CI pipeline"]


@refreshable(deps=[ApiKeys])
def key_list() -> None:
    names = list(ApiKeys().names)
    with ui.vstack(gap="sm", classes="w-full max-w-md"):
        for name in names:
            dialog = ui.dialog(title=f"Revoke the {name} key?", width="sm")
            with dialog, ui.vstack(gap="md"):
                ui.text("Apps using it will stop working at once.", color="muted")
                with ui.hstack(gap="sm", justify="end"):
                    ui.button("Keep it", variant="ghost", on_click=dialog.close())
                    ui.button("Revoke", color="error",
                              on_click=[partial(revoke, name), dialog.close()])
            with ui.card(padding="sm"), ui.hstack(justify="between"):
                with ui.hstack(gap="sm"):
                    ui.icon("key-round", color="primary")
                    ui.text(name, weight="medium")
                ui.button("Revoke", size="sm", variant="soft", color="error",
                          on_click=dialog.open())
        if not names:
            ui.text("No active keys.", color="muted", align="center")
            ui.button("Restore the demo keys", variant="outline",
                      icon_left="rotate-ccw", on_click=restore_keys)


def revoke_keys() -> None:
    key_list()

A form in a dialog

persistent=True keeps the close button but ignores Escape and the backdrop, so a stray click never loses a half-typed form. The handler receives the typed form state.

Invite a teammate

Team

A[email protected]

Owner

class Invite(PageState):
    email: str = field(default="")
    role: str = field(default="editor")


class Team(PageState):
    members: list = field(default_factory=lambda: [["[email protected]", "owner"]])


def send_invite(invite: Invite) -> None:
    email = str(invite.email).strip()
    if email:
        team = Team()
        team.members = [*team.members, [email, str(invite.role)]]
    invite.email = ""


@refreshable(deps=[Team])
def member_list() -> None:
    with ui.vstack(gap="sm", classes="w-full"):
        for email, role in list(Team().members):
            with ui.hstack(justify="between"):
                with ui.hstack(gap="sm"):
                    ui.avatar(name=email, size="sm", color="secondary")
                    ui.text(email)
                ui.badge(role.capitalize(), variant="soft", size="sm")


def invite_form() -> None:
    invite = Invite()
    dialog = ui.dialog(title="Invite a teammate", persistent=True)
    with dialog, ui.form(on_submit=[send_invite, dialog.close()]), ui.vstack(gap="md"):
        with ui.form_field(label="Email", required=True):
            ui.input(value=invite.email, type="email",
                     placeholder="[email protected]", icon_left="mail")
        with ui.form_field(label="Role"):
            ui.select(value=invite.role, options=[("viewer", "Viewer"),
                                                  ("editor", "Editor"),
                                                  ("admin", "Admin")])
        with ui.hstack(gap="sm", justify="end"):
            ui.button("Cancel", variant="ghost", on_click=dialog.close())
            ui.button("Send invite", type="submit", icon_left="send")
    with ui.card(padding="md", classes="w-full max-w-md"), ui.vstack(gap="md"):
        with ui.hstack(justify="between"):
            ui.heading("Team", level=3, size="md")
            ui.button("Invite", size="sm", icon_left="user-plus", on_click=dialog.open())
        member_list()

Widths

sm, md (the default), lg and xl.

Rename the board

This dialog uses width="sm". Pick the narrowest one its content reads well in.

Share this document

This dialog uses width="md". Pick the narrowest one its content reads well in.

What's new in version 4.2

This dialog uses width="lg". Pick the narrowest one its content reads well in.

Compare the plans

This dialog uses width="xl". Pick the narrowest one its content reads well in.

def widths() -> None:
    with ui.hstack(gap="sm", wrap=True, justify="center"):
        for width, title in (("sm", "Rename the board"),
                             ("md", "Share this document"),
                             ("lg", "What's new in version 4.2"),
                             ("xl", "Compare the plans")):
            with ui.dialog(title=title, width=width) as dialog, ui.vstack(gap="md"):
                ui.text(f"This dialog uses width=\"{width}\". Pick the "
                        "narrowest one its content reads well in.",
                        color="muted")
                with ui.hstack(justify="end"):
                    ui.button("Got it", on_click=dialog.close())
            ui.button(f"Width {width}", variant="outline", on_click=dialog.open())

An answer is required

dismissible=False removes the close button, Escape and the backdrop click: only the buttons inside can close it.

Your session is about to expire

You have been inactive for 28 minutes. Unsaved changes to this invoice will be lost.

def session_expiry() -> None:
    with ui.dialog(title="Your session is about to expire", width="sm",
                   dismissible=False) as dialog, ui.vstack(gap="md"):
        ui.text("You have been inactive for 28 minutes. Unsaved changes "
                "to this invoice will be lost.", color="muted")
        with ui.hstack(gap="sm", justify="end"):
            ui.button("Sign out", variant="ghost", on_click=dialog.close())
            ui.button("Stay signed in", on_click=dialog.close())
    ui.button("Simulate inactivity", variant="outline", icon_left="timer",
              on_click=dialog.open())