Banner
Full-width persistent strip pinned to viewport or section top. Uses the same semantic variants as alert, but edge-to-edge with no border-radius and a subtle gradient wash.
<arc-banner>Overview
Banner shows full-width messages that span their container, usually the viewport or a major content section. Unlike alert (which sits inline with border-radius and constrained width), banner is edge-to-edge with no rounding, like a system-level notification bar.
Use banner for messages that apply globally rather than to a specific piece of content: maintenance windows, version updates, cookie consent, or account-level warnings. The sticky option pins the banner to the top of the viewport so it remains visible as the user scrolls, while the dismissible option lets users close it once they have acknowledged the message.
Four semantic variants (info, success, warning, and error) apply a subtle gradient wash and matching icon, using the same colors as alert and toast. The component renders as a landmark with role="banner" when used at the page level, and includes aria-live="polite" for dynamically injected banners.
Guidelines
When to use
- Use banner for global, page-level messages that apply to the entire application
- Enable sticky for critical messages that must remain visible as the user scrolls
- Use the warning variant for maintenance windows or upcoming breaking changes
- Keep banner text concise: one line with an optional action link
- Place the banner at the very top of the layout, above the top bar if possible
When not to use
- Do not use banner for inline, content-specific feedback. Use alert or inline-message instead
- Do not stack multiple banners. Consolidate messages or queue them sequentially
- Do not make every banner dismissible; some system messages should persist
- Do not use the error variant for warnings. Reserve it for genuine outages or failures
- Do not place banners in the middle of page content; they belong at the top edge
Features
- Full-width edge-to-edge layout with no border-radius
- Four semantic variants (info, success, warning, error) with gradient wash backgrounds
- Sticky mode pins the banner to the top of the viewport on scroll
- Dismissible mode adds a close button and fires `arc-close` on close
- Accessible `role="banner"` and aria-live="polite" for dynamic content
- Slide-down enter and collapse exit transitions
- Slot for custom content including links, buttons, or inline actions
Preview
Usage
Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.
<arc-banner variant="info" dismissible>
Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</arc-banner>
<arc-banner variant="warning" sticky>
Your subscription expires in 3 days.
<a href="/billing" slot="action">Renew now</a>
</arc-banner>import { Banner } from '@arclux/arc-ui-react';
export default function Example() {
return (
<>
<Banner variant="info" dismissible>
Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</Banner>
<Banner variant="warning" sticky>
Your subscription expires in 3 days.
</Banner>
</>
);
}<script setup>
import { Banner } from '@arclux/arc-ui-vue';
</script>
<template>
<Banner variant="info" dismissible>
Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</Banner>
</template><script>
import { Banner } from '@arclux/arc-ui-svelte';
</script>
<Banner variant="info" dismissible>
Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</Banner>import { Component } from '@angular/core';
import { Banner } from '@arclux/arc-ui-angular';
@Component({
imports: [Banner],
template: `
<arc-banner variant="info" dismissible>
Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</arc-banner>
`,
})
export class MyComponent {}import { Banner } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Banner variant="info" dismissible>
Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</Banner>
);
}import { Banner } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<Banner variant="info" dismissible>
Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</Banner>
);
}API
variant'info' | 'success' | 'warning' | 'error''info'- Controls the semantic color palette and icon. Use "info" for neutral announcements, "success" for positive confirmations, "warning" for caution states, and "error" for outages or critical failures.
dismissiblebooleanfalse- When true, renders a close button on the right side. Clicking it collapses the banner and fires an "arc-close" event.
stickybooleanfalse- When true, pins the banner to the top of the viewport with position: sticky so it remains visible as the user scrolls.
Events
arc-close- Fired when a dismissible banner is closed by the user
See Also
- AlertContextual alert banner with five semantic variants and an optional dismiss button.
- ToastStack-managed notification toasts with auto-dismiss, variant-colored indicators, configurable position, and enter/exit animations.
- Connection StatusDetects online/offline via the navigator API. Offline shows a persistent warning bar with an amber glow pulse. Reconnecting dismisses it with a success flash.