# Banner

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

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

## Basic usage

**Implementation**

```tsx
<Banner>Changes saved successfully.</Banner>
```

**Styling**

Target a Banner type to replace its default surface without changing semantic success or error messages.

```css
.banner--type-default {
  background: #f3f1ff;
  color: #211b4d;
  border: 1px solid #c8c0ff;
  border-radius: 8px;
}
```

- `background`: Banner surface color.
- `border`: Optional Banner outline.
- `color`: Banner text and inherited icon color.

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

**Implementation**

```tsx
<Banner type="default">Default message</Banner>
<Banner type="success">Changes saved successfully.</Banner>
<Banner type="info">Additional context is available.</Banner>
<Banner type="error">Something went wrong.</Banner>
```

**Styling**

Use each semantic modifier to align success and error Banners with a customer’s status palette.

```css
.banner--type-success {
  background: #dcfce7;
  color: #166534;
}

.banner--type-error {
  background: #fee2e2;
  color: #991b1b;
}
```

- `background`: Semantic Banner surface.
- `color`: Semantic Banner text and inherited icon color.

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