Remix

Remix

Toasts

withToast

withToast

withTitleOnly

withTitleOnly

No-code toast

No-code toast

withSuccess

withSuccess

withError

withError

Sonner

All the toasts on framer.today are powered by Sonner toasts from Emil Kowalski.

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, events, and appear effects allows us to create something similar with no code.

The appear effect is set on the instance of the Toast component inside the overlay as this is the only way we can get entry and exit effects tied together.

There's a 'Close' appear event in the toast component with a delay of 3s. When editing the overlay we can assign this to the close overlay interaction to make it dismiss automatically.

There's a 'Close' appear event in the toast component with a delay of 3s. When editing the overlay we can assign this to the close overlay interaction to make it dismiss automatically.

Note that the overlay is technically still open until the close event fires and the exit animation of the No-code toast component completes. This means the next click on the canvas will always dismiss the overlay before other interactions are possible..