System banner
DraftA persistent, full-width banner anchored to the top of the viewport for system-level announcements.
- Usage
- Specs
- Content
- Status & changelog
- Code
Common alternative names
Global banner, App-wide notice, Maintenance banner
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Usage
import { SystemBanner } from '@arch-ui/components';
<SystemBanner variant="warning">
Scheduled maintenance tonight from 10 pm to 2 am UTC.
</SystemBanner>
Variants
<SystemBanner variant="info">A new version is available.</SystemBanner>
<SystemBanner variant="warning">Service degradation detected in EU region.</SystemBanner>
<SystemBanner variant="danger">Critical outage in progress. Our team is investigating.</SystemBanner>
With action
<SystemBanner
variant="danger"
actionText="View status page"
onAction={() => window.open('/status', '_blank')}
>
Multiple services are experiencing issues.
</SystemBanner>
Dismissible
System banners are non-dismissible by default. Only allow dismissal for informational messages, never for active incidents.
<SystemBanner variant="info" onClose={() => setVisible(false)}>
We have updated our privacy policy.
</SystemBanner>
Expected props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'warning' | 'danger' | 'info' | Severity level controlling colour. |
children | ReactNode | required | Banner message. Keep to one sentence. |
actionText | string | -- | Label for an optional action link or button. |
onAction | () => void | -- | Callback when the action is clicked. |
onClose | () => void | -- | When provided, renders a dismiss button. |
className | string | -- | Additional CSS class names. |
System Banner vs Banner
| System Banner | Banner | |
|---|---|---|
| Scope | System-wide, above all content | Page or section level |
| Position | Fixed to viewport top | Inline in document flow |
| Dismissibility | Non-dismissible by default | Dismissible by default |
| Variants | info, warning, danger (no success) | info, success, warning, danger |
Accessibility
- Uses
role="alert"fordangerandwarningvariants to trigger an assertive screen reader announcement. - The banner must remain visible and not be obscured by other fixed or sticky elements.
- If an action link is present, it must be keyboard focusable and clearly describe its destination.
- Colour alone should not convey severity -- the text content must make the severity clear.