Skip to main content
Destructive or important actions benefit from an explicit confirmation step before executing. Prefab provides Dialog and Popover components that pair naturally with ToolCall and ShowToast to build these patterns.

​
Confirmation Dialog

Wrap a destructive trigger in a Dialog so users must confirm before the action fires. The first child is the trigger element; the remaining children form the dialog body. The Cancel button closes the dialog automatically — no extra wiring required.

​
Two-Step Destructive Actions

Some destructive actions need to show the user what will happen before they confirm. Combine a Dialog with ShowToast callbacks to give feedback after the server responds.
Two-Step Confirmation
from prefab_ui.components import Button, Column, Dialog, Row, Text
from prefab_ui import ToolCall, ShowToast

with Dialog(title="Remove User", description="This will revoke all access."):
    Button("Remove", variant="destructive")
    Column(
        gap=3,
        children=[
            Text("User {{ user_name }} will lose access to all projects."),
            Row(
                gap=2,
                css_class="justify-end",
                children=[
                    Button("Cancel", variant="outline"),
                    Button(
                        "Remove User",
                        variant="destructive",
                        on_click=ToolCall(
                            "remove_user",
                            arguments={"user_id": "{{ user_id }}"},
                            on_success=ShowToast("User removed", variant="success"),
                            on_error=ShowToast("{{ $error }}", variant="error"),
                        ),
                    ),
                ],
            ),
        ],
    )
The on_success and on_error callbacks on ToolCall fire after the server tool completes, giving the user immediate feedback without additional logic.

​
Toast Feedback

ShowToast works on any ToolCall action, with or without a dialog. Use it whenever users need to know whether a server action succeeded. Toast variants: "success", "error", "warning", "info", or omit for default styling.

​
Inline Confirmation with Popover

For lighter-weight confirmations that do not need a full modal overlay, use a Popover. The same trigger-then-content pattern applies: first child is the trigger, the rest is the popover body. Popovers are a good fit for reversible actions where a full dialog would feel heavy.