Skip to main content
Dialogs display content in a modal overlay that focuses user attention. Like Popover, the first child becomes the trigger and the remaining children form the dialog body. An optional title and description render in the dialog header.

​
Basic Usage

​
Confirmation Pattern

Dialogs work well for destructive actions that need explicit confirmation before proceeding. Use CloseOverlay() on the Cancel button to dismiss the dialog, and on the confirm button to close it after the action fires.

​
Confirmation with Feedback

Wire ShowToast callbacks onto a CallTool to give feedback after the server responds. CloseOverlay() in the on_success list dismisses the dialog once the operation succeeds; on_error keeps the dialog open so the user can retry. 
from prefab_ui.components import Button, Dialog, Row, Text
from prefab_ui.actions import CloseOverlay, ShowToast
from prefab_ui.actions.mcp import CallTool
from prefab_ui.rx import Rx

user_name = Rx("user_name")
user_id = Rx("user_id")

with Dialog(title="Remove User", description="This will revoke all access."):
    Button("Remove", variant="destructive")
    Text(f"User {user_name} will lose access to all projects.")
    with Row(gap=2, css_class="justify-end"):
        Button("Cancel", variant="outline", on_click=CloseOverlay())
        Button(
            "Remove User",
            variant="destructive",
            on_click=CallTool(
                "remove_user",
                arguments={"user_id": user_id},
                on_success=[
                    ShowToast("User removed", variant="success"),
                    CloseOverlay(),
                ],
                on_error=ShowToast("{{ $error }}", variant="error"),
            ),
        )

​
API Reference

Dialog Parameters

​
title
str | None
default:"None"
Dialog header title.
​
description
str | None
default:"None"
Dialog header description text.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Dialog
{
  "type": "Dialog",
  "children?": "[Component]",
  "let?": "object",
  "title?": "string",
  "description?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Dialog.