---
title: Banner
description: Add a banner to your site.
icon: megaphone
author:
name: malinskibeniamin
url: https://github.com/malinskibeniamin
search:
keywords: [announcement, notice bar]
# Full-width iframe previews; the table of contents would sit on top of them.
mode: wide
---
### Installation
```package-install
npx shadcn@latest add @redpanda/banner
```
An example banner representation for suspended organization.
## When to use
Use Banner for important site-wide announcements that need immediate user attention:
```mermaid
graph TD;
A[❓ Need to communicate site-wide message?] --> B{Message urgency?};
B -->|Critical| C[✅ Use Banner with prominent styling];
B -->|Important| D[✅ Use Banner with standard styling];
B -->|Informational| E[⚠️ Consider other notification methods];
F{Temporary message?} -->|Yes| G[✅ Use dismissible Banner];
F -->|No| H[✅ Use persistent Banner];
I{Affects all users?} -->|Yes| C;
I -->|No| J[⚠️ Use targeted notifications instead];
classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;
class C,D,G,H recommended;
class E,J discouraged;
class A,B,F,I decision;
```
**Use Banner when:**
- Announcing system maintenance or downtime
- Communicating critical security updates
- Promoting important new features
- Displaying legal notices or policy changes
- Showing account status issues
**Don't use Banner when:**
- Message is user-specific (use alerts or notifications)
- Content is promotional but not critical
- Information is page-specific (use inline alerts)
- Message changes frequently
## Anatomy
The Banner component provides a persistent notification area:
```
Banner Container (full-width, top of page)
┌─────────────────────────────────────────────────────────────┐
│ Banner Wrapper │
│ ├── Icon (optional) │
│ ├── Message Content │
│ └── Dismiss Button (optional) │
└─────────────────────────────────────────────────────────────┘
```
**Key Features:**
- **Persistent**: Stays visible across page navigation
- **Dismissible**: Optional close functionality
- **Responsive**: Adapts to different screen sizes
- **Accessible**: Proper ARIA labels and keyboard support
## Usage
```tsx lineNumbers
import { Banner } from '@/components/redpanda-ui/banner';
export default function RootLayout({ children }: { children: React.ReactNode }): React.ReactElement {
return (
Hello World
{children}
);
}
```
## Examples
### Variants
### With Action
### With Multiple Actions
### Dismissible
## Credits
- We use [Fumadocs](https://fumadocs.dev/docs/ui/components/banner) as inspiration for the banner component.
- We use [Origin UI](https://originui.com/banner) as inspiration for the banner style.