Notification Banners
System-level messages used to inform users about status updates, warnings, errors, or confirmations. They appear at the top of the viewport and adapt automatically to desktop and mobile layouts.
With Close Button
Desktop: Shows X icon. Mobile: Always expanded with X icon. Click X to close banner.
This page is not indexed
We've detected unusual activity indicative of mass account creation. To continue using our product, please provide evidence of legitimate use or consider upgrading to Pro for enhanced access and features.
This page is not indexed
We've detected unusual activity indicative of mass account creation. To continue using our product, please provide evidence of legitimate use or consider upgrading to Pro for enhanced access and features.
This page is not indexed
We've detected unusual activity indicative of mass account creation. To continue using our product, please provide evidence of legitimate use or consider upgrading to Pro for enhanced access and features.
This page is not indexed
We've detected unusual activity indicative of mass account creation. To continue using our product, please provide evidence of legitimate use or consider upgrading to Pro for enhanced access and features.
Without Close Button
Desktop: No icon, always expanded. Mobile: Collapsed by default with chevron-down, click to expand/collapse.
This page is not indexed
We've detected unusual activity indicative of mass account creation. To continue using our product, please provide evidence of legitimate use or consider upgrading to Pro for enhanced access and features.
This page is not indexed
We've detected unusual activity indicative of mass account creation. To continue using our product, please provide evidence of legitimate use or consider upgrading to Pro for enhanced access and features.
This page is not indexed
We've detected unusual activity indicative of mass account creation. To continue using our product, please provide evidence of legitimate use or consider upgrading to Pro for enhanced access and features.
This page is not indexed
We've detected unusual activity indicative of mass account creation. To continue using our product, please provide evidence of legitimate use or consider upgrading to Pro for enhanced access and features.
Usage Example
Example code for implementing Notification Banners
import { NotificationBanner, Button } from '@monorepo/ui/DesignSystem';
// With close button (X icon on desktop and mobile)
<NotificationBanner
type="warning"
title="This page is not indexed"
description="We've detected unusual activity..."
primaryAction={<Button size="sm">Label</Button>}
secondaryAction={<Button size="sm" variant="secondary">Dismiss</Button>}
onClose={() => console.log('closed')}
/>
// Without close button (responsive: desktop no icon, mobile chevron)
<NotificationBanner
type="info"
title="This page is not indexed"
description="We've detected unusual activity..."
primaryAction={<Button size="sm">Label</Button>}
/>
// Compact with close button
<NotificationBanner
type="success"
title="Changes saved successfully"
onClose={() => console.log('closed')}
/>
// Compact without close button
<NotificationBanner
type="info"
title="New feature available"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'warning' | 'info' | 'alert' | 'success' | 'info' | Banner type variant |
| title | ReactNode | - | Banner title (required) |
| description | ReactNode | - | Banner description (optional) |
| primaryAction | ReactNode | - | Primary action button |
| secondaryAction | ReactNode | - | Secondary action button |
| onClose | () => void | - | Close handler. Shows X icon on desktop and mobile, banner is expanded on mobile |
Behavior
With Close Button (onClose provided)
Desktop: Shows X icon on the right. Always expanded.
Mobile: Shows X icon on the right. Always expanded. Click X to close banner.
Without Close Button (onClose NOT provided)
Desktop: No icon. Always expanded showing full content.
Mobile: Shows chevron-down icon. Collapsed by default (shows only title). Click chevron to expand/collapse. Chevron rotates 180° when expanded.
Types
Warning
Color scheme: Yellow background (yellow-50), dark text (yellow-900).
Purpose: Communicates potential issues or actions that require caution.
Typical use cases: Low storage, upcoming expiration, limited access.
Info
Color scheme: Blue background (blue-50), dark text (blue-900).
Purpose: Shares general information or system updates.
Typical use cases: New feature announcements, general system messages.
Alert
Color scheme: Red background (red-50), dark text (red-900).
Purpose: Indicates critical errors or urgent issues that require immediate attention.
Typical use cases: Failed actions, blocked access, security warnings.
Success
Color scheme: Green background (green-50), dark text (green-900).
Purpose: Confirms positive outcomes.
Typical use cases: Completed actions, successful submissions, saved settings.