✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog
DocsBlogChangelog

Search documentation...

/

Star

12k+

[ Learn ]

[ Concepts ]

[ Reference ]

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.vstack(
    rx.alert(
        rx.alert_icon(),
        rx.alert_title(
            "Error Reflex version is out of date."
        ),
        status="error",
    ),
    rx.alert(
        rx.alert_icon(),
        rx.alert_title(
            "Warning Reflex version is out of date."
        ),
        status="warning",
    ),
    rx.alert(
        rx.alert_icon(),
        rx.alert_title("Reflex version is up to date."),
        status="success",
    ),
    rx.alert(
        rx.alert_icon(),
        rx.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.vstack(
    rx.alert(
        rx.alert_icon(),
        rx.alert_title("Reflex version is up to date."),
        rx.alert_description("No need to update."),
        status="success",
        variant="subtle",
    ),
    rx.alert(
        rx.alert_icon(),
        rx.alert_title("Reflex version is up to date."),
        status="success",
        variant="solid",
    ),
    rx.alert(
        rx.alert_icon(),
        rx.alert_title("Reflex version is up to date."),
        status="success",
        variant="top-accent",
    ),
    width="100%",
)

Alert


An alert feedback box.


  • Base Event Triggers

AlertIcon


An icon displayed in the alert.


  • No props for AlertIcon.

  • Base Event Triggers

AlertTitle


The title of the alert.


  • No props for AlertTitle.

  • Base Event Triggers

AlertDescription


AlertDescription composes the Box component.


  • No props for AlertDescription.

  • Base Event Triggers

← TabsCircularProgress →

Copyright © 2023 Pynecone, Inc.