AnnouncementBanner
A banner above the application for a platform-wide announcement, with its importance in icon, colour and word.
Announcement shows one announcement above the application: maintenance, a delay, new
features. Its importance is shown three ways: an icon, a colour and a visible word. It can carry a
line of text and a link, and a dismiss button when the announcement may be dismissed.
InformationNew statements are available
The statements of 2026 can be downloaded from Monday.
Read moreWarningMaintenance on Saturday from 08:00 to 10:00
CriticalPayments are delayed
Payments of today will arrive one day later.
// apps/docs/examples/ui/announcement-banner.tsx'use client';
import {useState} from 'react';
import {AnnouncementBanner} from '@workspace/active-ui/components/composed/announcement-banner';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * Announcements in three importances. The information can be dismissed; * the critical one cannot. Remembering a dismissal is the application's * work: here it lasts until you show it again. */export default function AnnouncementBannerExample() { const [showInfo, setShowInfo] = useState(true); return ( <div className="grid w-full gap-3"> {showInfo ? ( <AnnouncementBanner importance="INFO" importanceLabel="Information" title="New statements are available" body="The statements of 2026 can be downloaded from Monday." action={{label: 'Read more', href: '#announcement'}} dismissible dismissLabel="Dismiss the announcement" onDismiss={() => setShowInfo(false)} /> ) : ( <Button variant="outline" size="sm" className="justify-self-start" onClick={() => setShowInfo(true)} > Show the information again </Button> )} <AnnouncementBanner importance="WARNING" importanceLabel="Warning" title="Maintenance on Saturday from 08:00 to 10:00" /> <AnnouncementBanner importance="CRITICAL" importanceLabel="Critical" title="Payments are delayed" body="Payments of today will arrive one day later." /> </div> );}What the composition adds#
Three importances,
INFO,WARNINGandCRITICAL, each with its own icon and colour, and the word you pass asimportance.Label A landmark: the banner is a
<section>named by its title, so a screen reader can find it.Dismissal by contract: with
dismissiblethe type requiresdismiss, the name of the icon-only button; without it there is no button.Label
It is not an Alert: an alert belongs to the content of a page, a banner to the whole application.
Usage#
import {AnnouncementBanner} from '@workspace/active-ui/components/composed/announcement-banner';
<AnnouncementBanner importance="WARNING" importanceLabel="Warning" title="Maintenance on Saturday from 08:00 to 10:00" dismissible dismissLabel="Dismiss the announcement" onDismiss={dismiss}/>;What your application provides#
Which announcement to show, to whom and when, already translated.
Remembering a dismissal: the banner only reports it.
Accessibility#
No live region and no focus change: the banner is there when the page loads. If you show one during a session, announce it yourself.
The dismiss button is a named button and a tab stop.
API#
Import from @workspace/
Props
Events
Called by the component when something happens.
Takes only the props listed.