Banner

A full-width message about the whole page or app, such as maintenance or an account problem.

Scheduled maintenance on 24 October, 22:00–23:00. The portal may be unavailable.

Usage

import { Banner } from '@epilot/spark-ui/banner'

<Banner variant="warning">Your payment method expires next month.</Banner>

Place a Banner at the top edge of the page or app shell, above the header or directly below it. It spans the full width of its container, with no rounded corners and a bottom border, so it reads as part of the frame rather than as page content.

Use a Banner for a message about the whole page or app: planned maintenance, an outage, an expiring payment method, or viewing the portal as another user. Show at most one at a time.

Use a Callout for a message about one section or form, placed next to the content it is about. A Callout can carry a title and actions; a Banner holds a short message.

Confirmations of an action, such as a submitted form, go to a Toast.

Examples

Tones

variant sets the color and icon, using the same five tones as Callout.

Scheduled maintenance on 24 October, 22:00–23:00.

Your account is verified.

Your payment method expires next month.

We can't load your contracts right now. Try again in a few minutes.

You are viewing the portal as Anna Schmidt.

Dismissible

Pass onClose to show a close button. The Banner does not hide itself: hide it in onClose, and store the choice if it should stay hidden on the next visit.

Your payment method expires next month.

In a page

Wrap the Banner and your page header in a sticky top-0 z-10 element inside the scroll area, so both stay in view while the content scrolls beneath them. Banner tones are translucent, so give the wrapper an opaque background. Use a Scroll Area viewport with role="region", an aria-label and tabIndex={0} so keyboard users can reach and scroll it.

Scheduled maintenance on 24 October, 22:00–23:00.

Customer portal

Contract 1: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 2: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 3: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 4: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 5: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 6: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 7: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 8: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 9: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 10: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 11: electricity, 3,200 kWh a year, next payment on the 1st of the month.

Contract 12: electricity, 3,200 kWh a year, next payment on the 1st of the month.

API Reference

Prop	Type	Default	Description
`variant`	`"info" \| "success" \| "warning" \| "error" \| "neutral"`	`"info"`	Color and icon.
`onClose`	`() => void`	—	Shows a close button and runs when it is clicked.
`closeLabel`	`string`	`"Close"`	Accessible name of the close button. Translate it with your app.
`children`	`React.ReactNode`	—	The message.
`className`	`string`	—	Merges with the base styles.

Other <div> props pass through.

Accessibility

Banner has no live-region role, like Callout. A message that appears after the page loads and must be announced needs role="status", or role="alert" when it is urgent.
The tone icon is decorative and aria-hidden. Write the message so it makes sense without the color or icon.
The close button is a native <button> named by closeLabel. When it hides the Banner, move focus to a sensible place, such as the main content, so it is not lost.