Banner
Add a banner to your site.
Made by malinskibeniamin
An example banner representation for suspended organization.
Installation
When to use
Use Banner for important site-wide announcements that need immediate user attention:
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
import { Banner } from '@/components/redpanda-ui/banner';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}): React.ReactElement {
return (
<html lang="en">
<body>
<Banner>Hello World</Banner>
{children}
</body>
</html>
);
}Credits
Built by malinskibeniamin. The source code is available on GitHub.