Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Feedback

/

Alert

Alerts are used to communicate a state that affects a system, feature or page. An example of the different alert statuses is shown below.

rx.chakra.vstack(
    rx.chakra.alert(
        rx.chakra.alert_icon(),
        rx.chakra.alert_title(
            "Error Reflex version is out of date."
        ),
        status="error",
    ),
    rx.chakra.alert(
        rx.chakra.alert_icon(),
        rx.chakra.alert_title(
            "Warning Reflex version is out of date."
        ),
        status="warning",
    ),
    rx.chakra.alert(
        rx.chakra.alert_icon(),
        rx.chakra.alert_title(
            "Reflex version is up to date."
        ),
        status="success",
    ),
    rx.chakra.alert(
        rx.chakra.alert_icon(),
        rx.chakra.alert_title("Reflex version is 0.1.32."),
        status="info",
    ),
    width="100%",
)

Along with different status types, alerts can also have different style variants and an optional description. By default the variant is 'subtle'.

rx.chakra.vstack(
    rx.chakra.alert(
        rx.chakra.alert_icon(),
        rx.chakra.alert_title(
            "Reflex version is up to date."
        ),
        rx.chakra.alert_description("No need to update."),
        status="success",
        variant="subtle",
    ),
    rx.chakra.alert(
        rx.chakra.alert_icon(),
        rx.chakra.alert_title(
            "Reflex version is up to date."
        ),
        status="success",
        variant="solid",
    ),
    rx.chakra.alert(
        rx.chakra.alert_icon(),
        rx.chakra.alert_title(
            "Reflex version is up to date."
        ),
        status="success",
        variant="top-accent",
    ),
    width="100%",
)

An alert feedback box.

PropTypeDescriptionValues
statusLiteral

The status of the alert ("success" | "info" | "warning" | "error")

variantLiteral

"subtle" | "left-accent" | "top-accent" | "solid"

Event Triggers

See the full list of default event triggers

An icon displayed in the alert.

Props

No component specific props

The title of the alert.

Props

No component specific props

AlertDescription composes the Box component.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting