Lily Design System™

AnnouncementBanner

A persistent, page-level banner for service-wide messages — scheduled maintenance, public-interest news, regulatory notices — that every user should see while the message is active.

The component renders a <div role="region"> so the banner is a labeled landmark in the page outline, named by the required label prop. Two optional behaviours layer on top:

  • dismissible adds a close <button> so users can hide a non-critical banner once they have read it; the consumer decides whether the dismissal is remembered (cookie, local storage, server flag).
  • live promotes the region to aria-live="polite" so screen readers announce content changes (e.g. updated maintenance ETA) without interrupting the user.

Reach for AnnouncementBanner when the message is broad and persistent. Use Alert for status tied to a specific section or action, Notification / Toast for transient confirmations, and PhaseBanner specifically for alpha/beta service phase messaging.

Example

AnnouncementBanner
Show demo markup 
<div class="announcement-banner" aria-label="a banner highlighting important messages for all users">AnnouncementBanner</div>
Usage example 
<AnnouncementBanner label="Service announcement" dismissible>
  <p>Maintenance is scheduled for Sunday between 2am and 4am.</p>
</AnnouncementBanner>
Show Svelte source 
// In your Svelte component:
import AnnouncementBanner from "lily-design-system-svelte-headless/components/AnnouncementBanner/AnnouncementBanner.svelte";

<AnnouncementBanner>
  <!-- content -->
</AnnouncementBanner>

Usage

<AnnouncementBanner label="Service announcement" dismissible>
  <p>Maintenance is scheduled for Sunday between 2am and 4am.</p>
</AnnouncementBanner>

Props

PropTypeDefaultDescription
labelstring (required)—Accessible region label
livebooleanfalseWhether the region announces dynamic changes via aria-live="polite"
dismissiblebooleanfalseWhether to render a dismiss button
dismissLabelstring"Dismiss"Accessible label for the dismiss button
onDismisscallback—Fired when the user dismisses the banner
childrenslot (required)—Banner content
...restPropsHTML attributes—Spread onto the root <div>

Keyboard Interactions

  • Tab moves focus to the dismiss button when present
  • Enter or Space activates the dismiss button (native browser behaviour)

ARIA

  • role="region" makes the banner a labeled landmark
  • aria-label (from label) names the region
  • aria-live="polite" (when live=true) announces content changes without interrupting the user
  • Dismiss button has aria-label for the close action

When to Use

  • Communicating service-wide messages such as scheduled maintenance, important news, or new feature launches
  • Surfacing time-sensitive information that all users should see

When Not to Use

  • Use Alert for in-flow status messages tied to a specific action or section
  • Use Notification for transient toast-style messages
  • Use PhaseBanner to indicate the development phase of a service
  • Use MedicalBanner for clinical safety information

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .announcement-banner as the root class. No default styles are included.

Related components

  • banner — generic top-of-page banner
  • phase-banner — service development phase indicator
  • alert — in-flow status message
  • notification — transient toast

References

Implementation Notes

  • Renders a <div role="region"> with an aria-label so screen readers announce the banner as a labeled landmark
  • Optional dismissible mode renders a close <button> that hides the banner when activated
  • Accepts children slot for the announcement content (text, links, icons composed by the consumer)
  • When live is true, the region also gets aria-live="polite" so dynamic content changes are announced
  • Spreads restProps onto the root <div> for consumer customization

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: announcement-banner
  • PascalCase: AnnouncementBanner
  • Description: a banner highlighting important messages for all users
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .announcement-banner
  • Interactive: no

ARIA

  • role="region" makes the banner a labeled landmark
  • aria-label (from label) names the region
  • aria-live="polite" (when live=true) announces content changes without interrupting the user
  • Dismiss button has aria-label for the close action

Keyboard

  • Tab moves focus to the dismiss button when present
  • Enter or Space activates the dismiss button (native browser behaviour)

Props

  • label: string (required) (default: —) — Accessible region label
  • live: boolean (default: false) — Whether the region announces dynamic changes via aria-live="polite"
  • dismissible: boolean (default: false) — Whether to render a dismiss button
  • dismissLabel: string (default: "Dismiss") — Accessible label for the dismiss button
  • onDismiss: callback (default: —) — Fired when the user dismisses the banner
  • children: slot (required) (default: —) — Banner content
  • ...restProps: HTML attributes (default: —) — Spread onto the root <div>