---
id: "packages/active-ui/announcement-banner"
title: "AnnouncementBanner"
description: "A banner above the application for a platform-wide announcement, with its importance in icon, colour and word."
url: "/packages/active-ui/announcement-banner"
locale: "en"
revision: "4f230304bed97899"
---

# AnnouncementBanner

`AnnouncementBanner` 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.

**Example: Announcements in three importances**

Client: Runs entirely in your browser. Source: `examples/ui/announcement-banner.tsx`.

```tsx
// 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`, `WARNING` and `CRITICAL`, each with its own icon and colour, and the
  word you pass as `importanceLabel`.
- **A landmark**: the banner is a `<section>` named by its title, so a screen reader can find it.
- **Dismissal by contract**: with `dismissible` the type requires `dismissLabel`, the name of the
  icon-only button; without it there is no button.

It is not an [Alert](/packages/active-ui/alert): an alert belongs to the content of a page, a
banner to the whole application.

## Usage

```tsx
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

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `importance` | `AnnouncementBannerImportance` | yes | The importance: its own icon, colour and word. |
| `importanceLabel` | `string` | yes | The translated word for the importance; visible next to the icon. |
| `title` | `string` | yes | The announcement's title, and the name of its landmark. |
| `action` | `{ label: string; href: string; } \| null` | no | An optional link below the text, such as "Read more". |
| `body` | `string \| null` | no | An optional line below the title. |
| `className` | `string` | no | Classes for the banner. |
| `dismissible` | `boolean` | no | Shows the dismiss button. Without it the banner is mandatory and cannot be dismissed. |
| `dismissLabel` | `string` | no | The translated name of the dismiss button. |
| `onDismiss` | `(() => void) \| (() => void)` | no | Called when the dismiss button is pressed; remembering it is yours. |

**AnnouncementBannerImportance**

```ts
type AnnouncementBannerImportance = 'INFO' | 'WARNING' | 'CRITICAL';
```

How important an announcement is. Each importance has its own icon,
colour and visible word (`importanceLabel`).

**AnnouncementBannerProps**

```ts
type AnnouncementBannerProps = AnnouncementBannerContent &
  AnnouncementBannerDismissal;
```