An alert dialog is a modal confirmation dialog that interrupts the user and expects a response.

The alert_dialog.root contains all the parts of the dialog.

The alert_dialog.trigger wraps the control that will open the dialog.

The alert_dialog.content contains the content of the dialog.

The alert_dialog.title is the title that is announced when the dialog is opened.

The alert_dialog.description is an optional description that is announced when the dialog is opened.

The alert_dialog.action wraps the control that will close the dialog. This should be distinguished visually from the alert_dialog.cancel control.

The alert_dialog.cancel wraps the control that will close the dialog. This should be distinguished visually from the alert_dialog.action control.

This example has a different color scheme and the cancel and action buttons are right aligned.

Use the inset component to align content flush with the sides of the dialog.

The on_open_change event is called when the open state of the dialog changes. It is used in conjunction with the open prop.

This example shows how to control whether the dialog is open or not with state. This is an easy way to show the dialog without needing to use the rx.alert_dialog.trigger.

rx.alert_dialog.root has a prop open that can be set to a boolean value to control whether the dialog is open or not.

We toggle this open prop with a button outside of the dialog and the rx.alert_dialog.cancel and rx.alert_dialog.action buttons inside the dialog.

This example adds new users to a database from an alert dialog using a form.

1. It defines a User1 model with name and email fields.
2. The add_user_to_db method adds a new user to the database, checking for existing emails.
3. On form submission, it calls the add_user_to_db method.
4. The UI component has:

• A button to open an alert dialog
• An alert dialog containing a form to add a new user
• Input fields for name and email
• Submit and Cancel buttons