add toast component

[Lendemor]

class ToastState(rx.State):
    def trigger_toast(self):
        return rx.toast("Hello World 2")

@rx.page(route="/toast", title="Toast")
def index():
    return rx.center(
        rx.color_mode.button(),
        rx.toast.provider(),
        rx.vstack(
            rx.button("Toast", on_click=rx.toast("Hello World 1")),
            rx.grid(
                rx.icon_button(
                    "arrow-up-left", on_click=rx.toast("Hello World", position="top-left"),
                ),
                rx.icon_button(
                    "arrow-up-right", on_click=rx.toast("Hello World", position="top-right"),
                ),
                rx.icon_button(
                    "arrow-down-left", on_click=rx.toast("Hello World", position="bottom-left"),
                ),
                rx.icon_button(
                    "arrow-down-right", on_click=rx.toast("Hello World", position="bottom-right"),
                ),
                columns="2",
            ),
            rx.button("Toast", on_click=ToastState.trigger_toast),
            rx.button("Toast info", on_click=rx.toast.info("Hello World")),
            rx.button("Toast success", on_click=rx.toast.success("Hello World")),
            rx.button("Toast warning", on_click=rx.toast.warning("Hello World")),
            rx.button("Toast error", on_click=rx.toast.error("Hello World")),
         ),
         width="100vw",
         height="100vh",
     )

[Alek99]

Since we plan on having an implicit toast on every page via the new connection banner, can we get rid of needed to add rx.toast.provider()

[Lendemor]

Since we plan on having an implicit toast on every page via the new connection banner, can we get rid of needed to add rx.toast.provider()

I'm not too sure about that, maybe we can have the new connection banner include it by default, but we should still leave the option for people to use their own toast system too I think.

[masenf]

is there a good way to style the toasts?

i tried passing styles to the toast.provider:

rx.toast.provider(
        style={
            "[data-sonner-toast][data-type=warning]": {
                "background_color": f"{rx.color('amber', 7)} !important",
                "_hover": {
                    "background_color": f"{rx.color('amber', 9)} !important",
                },
            },
        }
    )

But this is a bit messy and requires the use of !important, which is not great, and if we bundle a toast provider in the future for the connection banner, then i don't think this will be exposed outside of global styles or a custom stylesheet. Not sure if it will come up often, but worth thinking about.

[masenf]

if i pass a lucide icon here, it gives a frontend error and crashes

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {children, library, lib_dependencies, transpile_packages, tag, style, event_triggers, alias, is_default, key, id, class_name, special_props, autofocus, custom_attrs, State, size, color}). If you meant to render a collection of children, use an array instead.

[Lendemor]

is there a good way to style the toasts?

i tried passing styles to the toast.provider:

rx.toast.provider(
        style={
            "[data-sonner-toast][data-type=warning]": {
                "background_color": f"{rx.color('amber', 7)} !important",
                "_hover": {
                    "background_color": f"{rx.color('amber', 9)} !important",
                },
            },
        }
    )

But this is a bit messy and requires the use of !important, which is not great, and if we bundle a toast provider in the future for the connection banner, then i don't think this will be exposed outside of global styles or a custom stylesheet. Not sure if it will come up often, but worth thinking about.

toast will support style props so it'll be simpler

rx.button(
    "Toast",
    on_click=rx.toast(
        "Hello World 1",
        style={"background": "red", "color": "white"},
    ),
),

[picklelo]

Can we allow passing in the style props as kwargs here as well:

rx.toast(
    "Hello World 1",
    color="red",
)

[Lendemor]

Can we allow passing in the style props as kwargs here as well:

rx.toast(
    "Hello World 1",
    color="red",
)

Can we add in a follow up? I don't think this change is trivial.

[masenf]

Posted #3216 to get the action and cancel working, which i think are kind of essential for using toasts effectively

It also fixes some of the issues mentioned below

[masenf]

When i set this to True, the toasts still don't have a close button

[masenf]

When i set defaults here, they do not seem to be respected.

I tried setting it like

rx.toast.provider(toast_options=rx.toast.options(close_button=True, duration=300), close_button=True)

And the toasts still use the default 4000ms duration and do not have close buttons, unless i pass no options at all.

For example, i'm trying to toast like this

                    yield rx.toast.warning(
                        f"Removed {item.text} from {list_name}",
                        description="Whoops, this was irreversible"
                    )

It seems that any options passed myself overwrite all of the toaster options with the original defaults.

[masenf]

so i updated ToastProps to make all of the fields optional, which seemed to help; but now i'm finding that some of the fields in ToastProps don't take effect when passed to the toast_options prop.

• description
• position
• close_button
  (maybe others, didn't try them all)