Banner — ARC UI

Components

Banner

feedback

hybrid

<arc-banner>

Overview

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

Use banner for inline, content-specific feedback — use alert or inline-message instead
Stack multiple banners — consolidate messages or queue them sequentially
Make every banner dismissible — some system messages should persist
Use the error variant for warnings — reserve it for genuine outages or failures
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-dismiss 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';

<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: `
    <Banner variant="info" dismissible>
      Scheduled maintenance tonight from 11 PM to 1 AM UTC.
    </Banner>
  `,
})
export class MyComponent {}

import { Banner } from '@arclux/arc-ui-solid';

<Banner variant="info" dismissible>
  Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</Banner>

import { Banner } from '@arclux/arc-ui-preact';

<Banner variant="info" dismissible>
  Scheduled maintenance tonight from 11 PM to 1 AM UTC.
</Banner>

<!-- See HTML tab after running pnpm generate -->
<div class="arc-banner" data-variant="info">...</div>

<!-- See HTML (Inline) tab after running pnpm generate -->
<div class="arc-banner" style="...">...</div>

API

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Controls the semantic colour 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-dismiss" 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

Event	Description
`arc-dismiss`	Fired when a dismissible banner is closed by the user