Banner

Purpose

An announcement at the top of a shell, dismissable and remembered: the beta, a maintenance, a change of terms. A named aside with a word, a sentence, a link when there is more, and a close button whose choice is kept under a key.

When to use, when not

Use it for an information that concerns every page and can wait: a date, a maintenance. Not for the outcome of an action (LiveRegion or Toast), not for an error (Alert), not for anything the user must answer (Dialog).

Anatomy

1. The aside, with the line on the left.
2. The word, which names it.
3. The text, with its link.
4. The close button.

Props

Props of Banner

Name	Type	Default	What it does
label	string		The word that says what the banner is: "Bêta", "Maintenance". It names the aside.
dismissKey	string		The storage key that remembers a dismissal. Change it when the information changes, and the banner comes back once.
dismissLabel?	string	"Masquer l'annonce"	The close button's name.
children	Snippet		The announcement: a sentence or two, with a link when there is more to read.

States

The beta, and a maintenance.

beta

A named aside, no live role; close it and it stays closed under its key. Change the key to bring it back once.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

maintenance

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

Accessibility contract

• Role and name: complementary, named by the word through aria-labelledby. No role="alert", no aria-live.
• Keyboard, focus: the close button is a Tab stop; closing moves the focus nowhere in particular, the banner was not focused.
• Persistence: the dismissal is stored under dismissKey; a new key brings the banner back once.

Content rules

French. The word is one noun (“Bêta”). The text says the fact and the date; no countdown, no red, no “plus que N jours”.

Do and don’t

• Do put the date in the key when the banner carries one, so an extension of the date shows the banner again.
• Do not show more than one banner at a time.
• Do not animate it in.

Examples

<Banner label="Bêta" dismissKey="rgaa-banner-beta:{endsOn}">
	<p>L'application est gratuite jusqu'au <strong>{date}</strong>. {promise} <a href="/tarifs">Voir les tarifs</a></p>
</Banner>

Surfaces

• App: the beta banner of the lab, in the AppShell’s banner slot.

Related

Alert, IconButton.

Decisions

• 2026-09-24: closed at the first render and opened once storage is read, as the app’s banner does, so whoever closed it never sees it flash.

Criteria held by construction

• 12.6, Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d'en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
  A named aside: the banner is a landmark that can be reached or skipped, and it does not impose itself on the reading order.
• 7.5, Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d'assistance ?
  No alert role and no live region: nothing in a banner is urgent, and announcing it would interrupt the reading for what does not deserve it.
• 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  The word carries the status and the line on the left only confirms it.
• 11.9, Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?
  The close button is a real button named 'Masquer l'annonce', reachable at the keyboard.

Tokens it reads

• Colour: --rl-action, --rl-ink, --rl-line, --rl-sunken
• Typography: --rl-weight-bold, --rl-text-sm, --rl-text-xs, --rl-tracking-label
• Spacing: --rl-space-2, --rl-space-3, --rl-space-4
• Layout: --rl-border, --rl-border-strong

Seen in patterns

• App shell