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

Inside a Payload Admin Panel Custom Component:

You can also import the component directly:

Basic usage

Types

Use brand for product context, success to confirm an action, warning to flag a risk, and danger when something failed. Use the default type for neutral messages.

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

Accessibility

• Use text that communicates the message without relying on color alone.
• Include an icon only when it reinforces the meaning of the message.
• Keep actionable banners keyboard accessible and give their action a clear purpose.

Common props

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