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 rx.chakra.vstack(
        rx.chakra.button(
            "Show Alert Dialog",
            on_click=AlertDialogState.change,
        ),
        rx.chakra.alert_dialog(
            rx.chakra.alert_dialog_overlay(
                rx.chakra.alert_dialog_content(
                    rx.chakra.alert_dialog_header(
                        "Confirm"
                    ),
                    rx.chakra.alert_dialog_body(
                        "Do you want to confirm example?"
                    ),
                    rx.chakra.alert_dialog_footer(
                        rx.chakra.button(
                            "Close",
                            on_click=AlertDialogState.change,
                        )
                    ),
                )
            ),
            is_open=AlertDialogState.show,
        ),
        width="100%",
    )

API Reference

AlertDialog

Provides context and state for the dialog.

Prop	Type	Default Value	Values
`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`	Literal
`use_inert`	bool

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.