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.root

Contains all the parts of the dialog.

PropType | ValuesDefaultInteractive
open
bool

Event Triggers

See the full list of default event triggers
TriggerDescription
on_open_change Fired when the open state changes.

rx.alert_dialog.content

Contains the content of the dialog. This component is based on the div element.

PropType | ValuesDefaultInteractive
size
"1" | "2" | ...
force_mount
bool

Event Triggers

See the full list of default event triggers
TriggerDescription
on_open_auto_focus Fired when the dialog is opened.
on_close_auto_focus Fired when the dialog is closed.
on_escape_key_down Fired when the escape key is pressed.

rx.alert_dialog.trigger

Wraps the control that will open the dialog.

Props

No component specific props

rx.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

rx.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

rx.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

rx.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