AlertDialog

AlertDialog component is used to interrupt the user with a mandatory confirmation or event. The component will appear in front of the page prompting the user to conplete an event.

class AlertDialogState(rx.State):
    show: bool = False

    def change(self):
        self.show = not (self.show)


def alertdialog_example():
    return rc.vstack(
        rc.button(
            "Show Alert Dialog",
            on_click=AlertDialogState.change,
        ),
        rc.alert_dialog(
            rc.alert_dialog_overlay(
                rc.alert_dialog_content(
                    rc.alert_dialog_header("Confirm"),
                    rc.alert_dialog_body(
                        "Do you want to confirm example?"
                    ),
                    rc.alert_dialog_footer(
                        rc.button(
                            "Close",
                            on_click=AlertDialogState.change,
                        )
                    ),
                )
            ),
            is_open=AlertDialogState.show,
        ),
        width="100%",
    )

rc.AlertDialog

Provides context and state for the dialog.

Prop	Type \| Values	Default
`is_open`	`bool`
`least_destructive_ref`	`str`
`allow_pinch_zoom`	`bool`
`auto_focus`	`bool`
`block_scroll_on_mount`	`bool`
`close_on_esc`	`bool`
`close_on_overlay_click`	`bool`
`is_centered`	`bool`
`lock_focus_across_frames`	`bool`
`preserve_scroll_bar_gap`	`bool`
`return_focus_on_close`	`bool`
`size`	`"sm" \| "md" \| "lg" \| ...`
`use_inert`	`bool`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_close`	Fired when the modal is closing.
`on_close_complete`	Fired when the modal is closed and the exit animation is complete.
`on_esc`	Fired when the Esc key is pressed.
`on_overlay_click`	Fired when the overlay is clicked.