Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Overlay

/

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%",
    )

Provides context and state for the dialog.

PropTypeDescriptionValues
is_openbool

If true, the modal will be open.

least_destructive_refstr

The least destructive element to focus when the dialog opens.

allow_pinch_zoombool

Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to false.

auto_focusbool

If true, the modal will autofocus the first enabled and interactive element within the ModalContent

block_scroll_on_mountbool

If true, scrolling will be disabled on the body when the modal opens.

close_on_escbool

If true, the modal will close when the Esc key is pressed

close_on_overlay_clickbool

If true, the modal will close when the overlay is clicked

is_centeredbool

If true, the modal will be centered on screen.

lock_focus_across_framesbool

Enables aggressive focus capturing within iframes. If true, keep focus in the lock, no matter where lock is active. If false, allows focus to move outside of iframe.

preserve_scroll_bar_gapbool

If true, a padding-right will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens

return_focus_on_closebool

If true, the modal will return focus to the element that triggered it when it closes.

sizeLiteral

"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"

use_inertbool

If true, the siblings of the modal will have aria-hidden set to true so that screen readers can only see the modal. This is commonly known as making the other elements inert

Event Triggers

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

The dimmed overlay behind the dialog.

Props

No component specific props

The wrapper for the alert dialog's content.

Props

No component specific props

Should contain the title announced by screen readers.

Props

No component specific props

Should contain the description announced by screen readers.

Props

No component specific props

Should contain the events of the dialog.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting