Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Overlay

/

Toast

A rx.toast is a non-blocking notification that disappears after a certain amount of time. It is often used to show a message to the user without interrupting their workflow.

Using the rx.toast function require to have a toast provider in your app.

rx.toast.provider is a component that provides a context for displaying toasts. It should be placed at the root of your app.

You can use rx.toast as an event handler for any component that triggers an action.

rx.button("Show Toast", on_click=rx.toast("Hello, World!"))

If you want to interact with a toast, a few props are available to customize the behavior.

By passing a ToastAction to the action or cancel prop, you can trigger an action when the toast is clicked or when it is closed.

rx.button(
    "Show Toast",
    on_click=rx.toast(
        "Hello, World!", timeout=5000, close_on_click=True
    ),
)

rx.toast has some presets that you can use to show different types of toasts.

rx.vstack(
    rx.button(
        "Success", on_click=rx.toast.success("Success!")
    ),
    rx.button("Error", on_click=rx.toast.error("Error!")),
    rx.button(
        "Warning", on_click=rx.toast.warning("Warning!")
    ),
    rx.button("Info", on_click=rx.toast.info("Info!")),
)

If the presets don't fit your needs, you can customize the toast by passing to rx.toast some kwargs.

rx.button(
    "Custom",
    on_click=rx.toast(
        "Custom Toast!",
        position="top-right",
        border_radius="0.5em",
        style={
            "background-color": "green",
            "color": "white",
            "border": "1px solid green",
        },
    ),
)

A Toaster Component for displaying toast notifications.

PropTypeDescriptionValues
themestr

the theme of the toast

rich_colorsbool

whether to show rich colors

expandbool

whether to expand the toast

visible_toastsint

the number of toasts that are currently visible

positionLiteral

the position of the toast

close_buttonbool

whether to show the close button

offsetstr

offset of the toast

dirstr

directionality of the toast (default: ltr)

hotkeystr

Keyboard shortcut that will move focus to the toaster area.

invertbool

Dark toasts in light mode and vice versa.

toast_optionsToastProps

These will act as default options for all toasts. See toast() for all available options.

gapint

Gap between toasts when expanded

loading_iconIcon

Changes the default loading icon

pause_when_page_is_hiddenbool

Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked.

Event Triggers

See the full list of default event triggers
← PopoverTooltip →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting