Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Banner - Maintenance

use: deployed Web
Banners specifically for site-wide system messages, typically system maintenance, which are fixed to the top of the viewport.

Examples

Default (during maintenance)

View va-maintenance-banner in Storybook

Warning (upcoming maintenance)

View va-maintenance-banner maintenance warning in Storybook

Usage

When to use Banner - Maintenance

  • System maintenance. Before and during maintenance, we use specific system status messages to communicate the maintenance window to users. Use maintenance messages when all (or most) unauthenticated and authenticated applications, tools, or sign-in experiences across the entire site are affected (e.g., vets-api).

When to consider something else

Behavior

The content and UX behavior of site-wide maintenance banners are standardized. Only the duration, dates, and times are customizable.

The Public Website Team (Office of the CTO Digital Experience) publishes downtime maintenance banners. These banners have the following characteristics:

  • Dates, times, and duration (how many hours or minutes) are customizable in the upcoming/before message.
  • Times are always given in Eastern time (ET).
  • Banners are always dismissible per session.
  • The “upcoming” before message should be published at least 12 hours in advance. Allow more lead time when the outage is unusually long or comprehensive.
  • The banner automatically expires when downtime is complete.
  • A maximum of 3 banners can appear simultaneously.

Code usage

Web

Attributes and Properties

Property Attribute Type Default Description bannerId banner-id string

A unique ID that will be used for conditionally rendering the banner based on if the user has dismissed it already.

 disableAnalytics disable-analytics boolean false

Whether or not an analytics event will be fired.

 isError is-error boolean

Override logic for whether to show error or warning

 maintenanceEndDateTime maintenance-end-date-time string

The Date/Time of when the maintenance is scheduled to end.

 maintenanceStartDateTime maintenance-start-date-time string

The Date/Time of when the maintenance is scheduled to begin.

 maintenanceTitle maintenance-title string

The title of the banner shown during active maintenance.

 maintenanceTitleHeaderLevel maintenance-title-header-level number 2

The level of the header for the maintenance title. Default is h2.

 upcomingWarnStartDateTime upcoming-warn-start-date-time string

The Date/Time of when to be begin warning users of upcoming site maintenance.

 upcomingWarnTitle upcoming-warn-title string

The title of the banner shown for upcoming site maintenance.

Events

Name Description closeEvent Fires when the component is closed by clicking on the close icon. component-library-analytics The event used to track usage of the component. This is emitted when the component renders and enableAnalytics is true.

Provide feedback

Share your feedback, report issues, or suggest improvements for the Banner - Maintenance component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Mar 17, 2026