Remix

Toast

withToast

withTitleOnly

No-code toast

withSuccess

withError

These two options use preset icons, custom icons in v2

Sonner

Toast.tsx handles the positioning and styling. It needs to be present on every page you want to render a toast on. Edit it by selecting it in the Layers panel.

RenderToast.tsx is an override that handles the title and description text.

The button labels above correspond to the functions in the override so you can see how they differ.

To create a new message simply duplicate any functions, give it a unique name and then change the message.

Note: The offset calculation appears to be different for desktop and mobile so you may have to add more spacing on mobile to account for this.

I'll rewrite this for v2 to be more Framer-friendly — currently the font size and color have to be shared across the title and description.

You could also use this simpler code component as a starting point and let the default styling do the heavy lifting:

import { Toaster } from "sonner"

export default function Toast(props) {

    return (
        <Toaster theme=dark 
        />
    )
}

No-code

Combining fixed overlays and appear effects allows us to create something similar with no code.

The main caveat with using overlays is we can't set a timeout for it; it has to be dismissed on click.

We also can't trigger a second toast until the first has been dismissed.

I've added an event to the button component so we can assign it to the native 'Close overlay' event.