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.
Use the inset
component to align content flush with the sides of the dialog.
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
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 oustide of the dialog and the rx.alert_dialog.cancel
and rx.alert_dialog.action
buttons inside the dialog.
API Reference
rx.alert_dialog.content
Contains the content of the dialog. This component is based on the div element.
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