Alert Dialog
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.
Basic Example
This example has a different color scheme and the cancel and action buttons are right aligned.
ExpandCollapse
Use the inset component to align content flush with the sides of the dialog.
ExpandCollapse
Events when the Alert Dialog opens or closes
The on_open_change event is called when the open state of the dialog changes. It is used in conjunction with the open prop.
Number of times alert dialog opened or closed: 0
Alert Dialog open: false
ExpandCollapse
Controlling Alert Dialog with State
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.
ExpandCollapse
Form Submission to a Database from an Alert Dialog
This example adds new users to a database from an alert dialog using a form.
- It defines a User1 model with name and email fields.
- The
add_user_to_dbmethod adds a new user to the database, checking for existing emails. - On form submission, it calls the
add_user_to_dbmethod. - 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
ExpandCollapse
API Reference
rx.alert_dialog.root
Contains all the parts of the dialog.
Props
| Prop | Type | Description |
|---|---|---|
open | bool | The controlled open state of the dialog. |
default_open | bool | The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. |
rx.alert_dialog.content
Contains the content of the dialog. This component is based on the div element.
sizeProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
size | "1""2""3""4" | The size of the content. |
force_mount | bool | Whether to force mount the content on open. |
rx.alert_dialog.trigger
Wraps the control that will open the dialog.
Props
No component specific props
Event Triggers
See the full list of default event triggersrx.alert_dialog.title
An accessible title that is announced when the dialog is opened. This part is based on the Heading component with a pre-defined font size and leading trim on top.
Props
No component specific props
Event Triggers
See the full list of default event triggersrx.alert_dialog.description
An optional accessible description that is announced when the dialog is opened. This part is based on the Text component with a pre-defined font size.
Props
No component specific props
Event Triggers
See the full list of default event triggersrx.alert_dialog.action
Wraps the control that will close the dialog. This should be distinguished visually from the Cancel control.
Props
No component specific props
Event Triggers
See the full list of default event triggersrx.alert_dialog.cancel
Wraps the control that will close the dialog. This should be distinguished visually from the Action control.
Props
No component specific props