Toasts

LaunchFast includes toast notifications for temporarily calling attention to the result of an action. They use flash session data — temporary values that exist only for the next request — so there is no client state to manage.

How it works

Toasts are stored as flash data in a cookie session. When you redirect with a toast, the message is written to the session and read on the next request. After reading, the flash data is automatically cleared.

Redirect with toast

The most common pattern is redirecting after an action and showing a toast on the destination page:

import { redirectWithToast } from '#app/utils/toast.server.ts'

return redirectWithToast('/', {
  description: 'Changes saved',
  type: 'success',
})

This accepts an additional ResponseInit argument for setting other headers or status codes.

Toast without redirect

When you need a toast without redirecting, use createToastHeaders directly:

import { json } from '@remix-run/node'
import { createToastHeaders } from '#app/utils/toast.server.ts'

return json(
  { success: true },
  {
    headers: await createToastHeaders({
      description: 'Note updated',
      type: 'success',
    }),
  },
)

Combining headers

If you need to set multiple headers alongside the toast, use the combineHeaders utility from app/utils/misc.tsx:

import { combineHeaders } from '#app/utils/misc.tsx'

return json(
  { success: true },
  {
    headers: combineHeaders(
      await createToastHeaders({
        description: 'Note updated',
        type: 'success',
      }),
      { 'x-custom': 'value' },
    ),
  },
)

Toast types

The type field controls the visual style. Available types:

• message — neutral informational toast (default)
• success — green success indicator
• error — red error indicator