[REF-2647] Toast Reflex component! (Sonner)

[ema11412]

The creation of a Toast in reflex would be very useful.

for example

def toast() -> rx.Component:
    """The toast component."""
    return rx.toast(
        tile="Hello, world!",
        status="success",
        duration=5000,
        is_open=State.toast_open,
        position="top-right",
        onClose=State.close_toast,
    )

Ref:

• Chakra
• Tailwind
• Radix

PR : #3186

_{From SyncLinear.com | REF-2647}

[carlosabadia]

I also suggest Sonner :)

[masenf]

i think rather than having the toast declarative, we would probably implement it as an event that you could return from a backend event handler or in response to an event trigger.

rx.button(
    "Toast 🍸",
    on_click=rx.toast(
        tile="Hello, world!",
        status="success",
        duration=5000,
        position="top-right",
        onClose=State.close_toast,
    )
)

[picklelo]

@masenf Agreed, it serves a similar functionality to rx.window_alert

[Lendemor]

I also suggest Sonner :)

Chance are high that we will go with the one from Radix since this it the lib we use as our core one.

Feel free to try wrapping the Sonner one as a 3rd party component if you want to. (https://reflex.dev/docs/custom-components/overview/)