diff --git a/docs/admin/overview.mdx b/docs/admin/overview.mdx
index 30be42884..8ecdf5564 100644
--- a/docs/admin/overview.mdx
+++ b/docs/admin/overview.mdx
@@ -107,6 +107,7 @@ The following options are available:
| `suppressHydrationWarning` | If set to `true`, suppresses React hydration mismatch warnings during the hydration of the root `` tag. Defaults to `false`. |
| `theme` | Restrict the Admin Panel theme to use only one of your choice. Default is `all`. |
| `timezones` | Configure the timezone settings for the admin panel. [More details](#timezones) |
+| `toast` | Customize the handling of toast messages within the Admin Panel. [More details](#toasts) |
| `user` | The `slug` of the Collection that you want to allow to login to the Admin Panel. [More details](#the-admin-user-collection). |
@@ -298,3 +299,20 @@ We validate the supported timezones array by checking the value against the list
`timezone: true`. See [Date Fields](../fields/overview#date) for more
information.
+
+## Toast
+
+The `admin.toast` configuration allows you to customize the handling of toast messages within the Admin Panel, such as increasing the duration they are displayed and limiting the number of visible toasts at once.
+
+
+ **Note:** The Admin Panel currently uses the
+ [Sonner](https://sonner.emilkowal.ski) library for toast notifications.
+
+
+The following options are available for the `admin.toast` configuration:
+
+| Option | Description | Default |
+| ---------- | ---------------------------------------------------------------------------------------------------------------- | ------- |
+| `duration` | The length of time (in milliseconds) that a toast message is displayed. | `4000` |
+| `expand` | If `true`, will expand the message stack so that all messages are shown simultaneously without user interaction. | `false` |
+| `limit` | The maximum number of toasts that can be visible on the screen at once. | `5` |
diff --git a/packages/payload/src/config/client.ts b/packages/payload/src/config/client.ts
index f6fa1266d..1eb1e20ee 100644
--- a/packages/payload/src/config/client.ts
+++ b/packages/payload/src/config/client.ts
@@ -116,6 +116,7 @@ export const createClientConfig = ({
routes: config.admin.routes,
theme: config.admin.theme,
timezones: config.admin.timezones,
+ toast: config.admin.toast,
user: config.admin.user,
}
diff --git a/packages/payload/src/config/types.ts b/packages/payload/src/config/types.ts
index 82c6f132c..ef6364f2c 100644
--- a/packages/payload/src/config/types.ts
+++ b/packages/payload/src/config/types.ts
@@ -752,7 +752,6 @@ export type Config = {
username?: string
}
| false
-
/** Set account profile picture. Options: gravatar, default or a custom React component. */
avatar?:
| 'default'
@@ -760,6 +759,7 @@ export type Config = {
| {
Component: PayloadComponent
}
+
/**
* Add extra and/or replace built-in components with custom components
*
@@ -939,6 +939,29 @@ export type Config = {
* Configure timezone related settings for the admin panel.
*/
timezones?: TimezonesConfig
+ /**
+ * @experimental
+ * Configure toast message behavior and appearance in the admin panel.
+ * Currently using [Sonner](https://sonner.emilkowal.ski) for toast notifications.
+ */
+ toast?: {
+ /**
+ * Time in milliseconds until the toast automatically closes.
+ * @default 4000
+ */
+ duration?: number
+ /**
+ * If `true`, will expand the message stack so that all messages are shown simultaneously without user interaction.
+ * Otherwise only the latest notification can be read until the user hovers the stack.
+ * @default false
+ */
+ expand?: boolean
+ /**
+ * The maximum number of toasts that can be visible on the screen at once.
+ * @default 5
+ */
+ limit?: number
+ }
/** The slug of a Collection that you want to be used to log in to the Admin dashboard. */
user?: string
}
diff --git a/packages/ui/src/providers/Root/index.tsx b/packages/ui/src/providers/Root/index.tsx
index 336bdecba..c704b9953 100644
--- a/packages/ui/src/providers/Root/index.tsx
+++ b/packages/ui/src/providers/Root/index.tsx
@@ -139,7 +139,7 @@ export const RootProvider: React.FC = ({
-
+
)
}
diff --git a/packages/ui/src/providers/ToastContainer/index.tsx b/packages/ui/src/providers/ToastContainer/index.tsx
index 44caf87ee..63b653543 100644
--- a/packages/ui/src/providers/ToastContainer/index.tsx
+++ b/packages/ui/src/providers/ToastContainer/index.tsx
@@ -1,4 +1,6 @@
'use client'
+import type { ClientConfig } from 'payload'
+
import React from 'react'
import { Toaster } from 'sonner'
@@ -7,13 +9,19 @@ import { Info } from './icons/Info.js'
import { Success } from './icons/Success.js'
import { Warning } from './icons/Warning.js'
-export const ToastContainer: React.FC = () => {
+export const ToastContainer: React.FC<{
+ config: ClientConfig
+}> = ({ config }) => {
+ const { admin: { toast: { duration, expand, limit } = {} } = {} } = config
+
return (
,
@@ -36,7 +44,7 @@ export const ToastContainer: React.FC = () => {
},
unstyled: true,
}}
- visibleToasts={5}
+ visibleToasts={limit ?? 5}
/>
)
}