Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Banner

Full-width persistent strip pinned to viewport or section top. Uses semantic variants like alert but edge-to-edge with no border-radius and a subtle gradient wash.

Components Banner
feedback hybrid
<arc-banner>

Overview

Banner delivers high-visibility, full-width messages that span the entire width of their container — typically 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, giving it the feel of 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, following the same color language as alert and toast so users can parse severity at a glance. 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
  • Subtle gradient wash background for each variant
  • Accessible `role="banner"` and aria-live="polite" for dynamic content
  • Smooth slide-down enter and collapse exit transitions
  • Slot for custom content including links, buttons, or inline actions

Preview

Scheduled maintenance tonight from 11 PM to 1 AM UTC.

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.
dismissible boolean false
When true, renders a close button on the right side. Clicking it collapses the banner and fires an "arc-close" event.
sticky boolean false
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
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy