Sonner

An opinionated toast component for React built on Sonner.

CMSPayload CMS Integration

Toast notifications can be triggered from CMS events like form submissions, with customizable messages and types configured by content editors.

CMS Demo

See how content editors configure toast notifications in a CMS:

CMS FieldsEN

Toast Type

Success Message

Error Message

This simulates how a content editor configures toast messages in Payload CMS. Messages can be localized for different languages.

CMS ConfigurationSimulates Payload CMS toast configuration

Payload Config Example

// In your Payload CMS config
export const ToastMessages = {
  slug: "toast-messages",
  fields: [
    {
      name: "formSuccess",
      type: "group",
      fields: [
        { name: "title", type: "text", localized: true },
        { name: "description", type: "text", localized: true },
      ],
    },
    {
      name: "formError",
      type: "group",
      fields: [
        { name: "title", type: "text", localized: true },
        { name: "description", type: "text", localized: true },
      ],
    },
  ],
}

Using Toast Messages

import { toast } from "sonner"

export function ContactForm({ messages }) {
  const handleSubmit = async (data) => {
    try {
      await submitForm(data)
      toast.success(messages.formSuccess.title, {
        description: messages.formSuccess.description,
      })
    } catch {
      toast.error(messages.formError.title, {
        description: messages.formError.description,
      })
    }
  }
}

Basic Usage

SonnerToast notifications

Installation

pnpm add @corew500/ui

Usage

Add the Toaster component to your app layout:

import { Toaster } from "@mordecai-design-system/ui"

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

Then use the toast function from sonner:

import { toast } from "sonner"

toast("Event has been created")

Examples

Success

toast.success("Success!", {
  description: "Your changes have been saved.",
})

Error

toast.error("Error", {
  description: "Something went wrong.",
})

Warning

toast.warning("Warning", {
  description: "Please review your input.",
})

Info

toast.info("Info", {
  description: "Here's some information.",
})

Loading

const promise = fetchData()

toast.promise(promise, {
  loading: "Loading...",
  success: "Data loaded!",
  error: "Failed to load data",
})

With Action

toast("Event created", {
  action: {
    label: "Undo",
    onClick: () => undoEvent(),
  },
})

Props

Toaster

Prop	Type	Default	Description
`id`	string	—	—
`invert`	enum	—	—
`theme`	enum	—	—
`position`	enum	—	—
`hotkey`	string[]	—	—
`richColors`	enum	—	—
`expand`	enum	—	—
`duration`	number	—	—
`gap`	number	—	—
`visibleToasts`	number	—	—
`closeButton`	enum	—	—
`toastOptions`	ToastOptions	—	—
`className`	string	—	—
`style`	CSSProperties	—	—
`offset`	enum	—	—
`mobileOffset`	enum	—	—
`dir`	enum	—	—
`swipeDirections`	SwipeDirection[]	—	—
`icons`	ToastIcons	—	—
`containerAriaLabel`	string	—	—

See the Sonner documentation for full API reference.