Banner

The Banner component displays a short message that needs more emphasis than surrounding content. Use its type to communicate the purpose of the message.

Import

1import { Banner } from '@payloadcms/ui'

Basic usage

Loading component example…

Types

Use success to confirm an action, error when something failed, warning to flag a risk, and info for additional context. Use the default type for neutral messages.

Loading component example…

Keep banner copy concise and include the next action when the user must resolve something.

Common props

These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Message displayed inside the banner.
`type`	`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`	`'default'`	Sets the message style.
`icon`	`ReactNode`	—	Displays an icon beside the message.
`alignIcon`	`'left' \| 'right'`	`'right'`	Positions the icon.
`onClick`	`(event: MouseEvent) => void`	—	Makes the banner actionable.
`to`	`string`	—	Makes the banner navigate to the given URL.

Was this page helpful?

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

Banner

Import

Basic usage

Types

Common props

Button