# System Notice Banner

System Notice Banner [#system-notice-banner]

The **SystemNoticeBanner** is an in-conversation banner notice rendered inside the chat surface (not as a message bubble) for local-first state changes: offline/online transitions, model switch, capability-unavailable, WebGPU→WASM fallback, cache eviction, or download-required notices. The `kind` sets the icon, tone, and default copy. Data source: `useNetworkStatus` / `useCapabilities`.

Preview [#preview]

```tsx
'use client';

/**
 * @file system-notice-banner-demo.tsx
 * @description Docs preview for `SystemNoticeBanner`. Shows the offline, WASM
 * fallback, and download-required notices inline in a chat surface.
 */
import { Button } from '@/registry/localmode/ui/button';
import { SystemNoticeBanner } from '@/components/system-notice-banner';

export default function SystemNoticeBannerDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-2">
      <SystemNoticeBanner kind="offline" onDismiss={() => {}} />
      <SystemNoticeBanner kind="fallback" />
      <SystemNoticeBanner
        kind="download-required"
        action={
          <Button type="button" size="xs">
            Download
          </Button>
        }
      />
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/conversation/system-notice-banner
```

Data source & dependencies [#data-source--dependencies]

**Data source:** renders the `kind` + copy you pass — works with any backend. Recommended producer: `useNetworkStatus` / `useCapabilities` from `@localmode/react` (on-device, optional).

* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `system-notice-banner.tsx` — `SystemNoticeBanner`
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**SystemNoticeBanner**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `kind` | `"info" \| "download-required" \| "eviction" \| "model-switch" \| "capability-unavailable" \| "fallback" \| "online" \| "offline"` | `"info"` | The notice kind (sets the icon, tone, and default copy). |
| `tone` | `"warning" \| "info"` | — | Override the tone independently of `kind`. |
| `message` | `string` | — | Notice text (falls back to the kind's default copy). |
| `action` | `ReactNode` | — | Optional trailing action (e.g. a "Download" or "Retry" button). |
| `onDismiss` | `function` | — | When provided, renders a dismiss control. |

Examples [#examples]

Surface offline state inline [#surface-offline-state-inline]

```tsx
import { useNetworkStatus } from '@localmode/react';
import { SystemNoticeBanner } from '@/components/system-notice-banner';

const { isOnline } = useNetworkStatus();

{!isOnline && <SystemNoticeBanner kind="offline" />}
```

Customization [#customization]

Override the `message`, `tone`, or `action` per notice. The default copy lives in `KIND_META` — edit it or add new `NoticeKind`s for your app’s own states.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state (e.g. `useNetworkStatus`) lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.