Banner
A full-width strip at the top of a page or section that carries one message about the whole product or account: a maintenance window, a billing problem, a new feature.
Preview
Scheduled maintenance on Sunday, 02:00 to 03:00 UTC. Editing will pause briefly.
When to use
- For something that affects everything on the page, not one field or card.
- For states that last: an overdue invoice, a read-only workspace, a scheduled outage.
- With one action that resolves or explains the message.
Reach for something else
- For feedback on one form or section: that is an inline Alert.
- For a passing confirmation of something just done: that is a toast.
Anatomy
- 1
Strip
Edge to edge, in a soft or filled wash of the intent's colour.
- 2
Icon
The intent's glyph, leading.
- 3
Message
One sentence; wraps rather than truncates on narrow screens.
- 4
Action
Optional link or small button.
- 5
Dismiss
Optional; omitted for messages that must stay until resolved.
States
Neutral
Brand or grey, for announcements.
Info, warning, error
The same intents as an alert, for account and system states.
Filled
A solid strip for the rare message that must not be missed.
Dismissed
The strip collapses and the page below moves up.
Accessibility
- The strip is a region with an accessible name, placed before the main content, so it is found early.
- A banner added after load uses role="status", or role="alert" for errors; one present at load needs no live role.
- The dismiss control is a <button> with an aria-label, and the action is a real link or button.
Source
The Banner is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block