Banner

import { Banner } from "@bosunkit/components/banner";
import type { ReactElement } from "react";

export const description: string =
  "The whole screen's message, under the top bar: this screen has lost its live data, and the readings are frozen.";

export default function Site(): ReactElement {
  return (
    <Banner title="Live data unavailable">
      The vessel's network is unreachable. Readings are frozen at 14:02 UTC.
    </Banner>
  );
}

Banner is the message the whole screen shares, under the top bar: this screen has lost its live data, a setting now applies. It is a live region (role="alert"), so the caller mounts it empty at startup and fills it when there is something to say, and it never moves focus or flashes.

Never an alert. The kinds are error, attention, info, success and discovery, and the mark is their only color — the notification colors, never the alert colors, which mean an alert and nothing else. No kind is called "warning": that word is an alert's priority.

import { Banner } from "@bosunkit/components/banner";
import type { ReactElement } from "react";

export const description: string =
  "The whole screen's message, under the top bar: this screen has lost its live data, and the readings are frozen.";

export default function Site(): ReactElement {
  return (
    <Banner title="Live data unavailable">
      The vessel's network is unreachable. Readings are frozen at 14:02 UTC.
    </Banner>
  );
}

Scope and urgency

Use a banner when the information applies to the whole current view. A single field's validation belongs in InlineMessage, and a panel-specific limitation belongs in SectionMessage. The ARIA alert role requests an assertive announcement; it is distinct from a bridge alert priority and does not assign one.

Keep the message stable while the condition lasts and avoid remounting it on every data update. Explain what remains available and provide a specific recovery action when one exists. Do not hide the only explanation in a temporary toast or cover the operational alert zone with a page notice.

Props