# Banner

Source: https://payloadcms.com/docs/beta/ui-components/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:

```tsx
import { Banner } from '@payloadcms/ui'
```

You can also import the component directly:

```tsx
import { Banner } from '@payloadcms/ui/elements/Banner'
```

## Basic usage

**Implementation**

```tsx
<Banner>Review these changes before publishing.</Banner>
```

**Styling**

Override Banner tokens on the component to adjust neutral messages without changing the same semantic colors throughout the Admin Panel.

```css
@layer payload {
  .banner {
    --color-bg-secondary: #f1f0ff;
    --color-text: #352f67;
    --radius-medium: 0.5rem;
  }
}
```

- `--color-bg-secondary`: Default banner background.
- `--color-text`: Default banner text and icon color.
- `--radius-medium`: Banner corner radius.

## 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.

**Implementation**

```tsx
<Banner type="default">Default message</Banner>
<Banner type="brand">Additional product context</Banner>
<Banner type="success">Changes saved successfully.</Banner>
<Banner type="warning">Review this setting before continuing.</Banner>
<Banner type="danger">Something went wrong.</Banner>
```

**Styling**

Target the class for each semantic Banner type to customize that message without changing unrelated uses of the same color token.

```css
@layer payload {
  .banner--type-brand {
    --color-bg-brand-tertiary: #eeeaff;
  }

  .banner--type-success {
    --color-bg-success-tertiary: #e3f7e9;
  }

  .banner--type-warning {
    --color-bg-warning-tertiary: #fff2d8;
  }

  .banner--type-danger {
    --color-bg-danger-tertiary: #fde8e7;
  }
}
```

- `--color-bg-brand-tertiary`: Brand banner background.
- `--color-bg-success-tertiary`: Success banner background.
- `--color-bg-warning-tertiary`: Warning banner background.
- `--color-bg-danger-tertiary`: Danger banner background.

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.

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