Offline banner · Club Hub UI

The app shell shows it at the top of the content while navigator.onLine is false, and hides it again on the online event. Offline is never an error dialog (UX guide §7.6): people keep working, writes go into the outbox and the save status shows what is waiting.

Look (design guide §9.4): the info status — --color-info-subtle background, --color-info-text, wifi-off icon — full width below the top bar, no radius.

The message reassures and says what happens next. Mention the number of waiting changes only in the save status, not here.

Render it once in the shell with hidden: true and toggle the hidden attribute, so the live region already exists when it becomes visible and the change is announced.

Examples

Default

Data

render({})

Markup

<div class="offline-banner" role="status"><svg class="icon" data-size="sm" aria-hidden="true"><use href="../../packages/ui/icons/icons.svg#wifi-off"/></svg>Offline – Änderungen werden gespeichert und später übertragen</div>

Read-only screen

Data

render({
  "message": "Offline – du siehst den Stand von heute 07:42"
})

Markup

<div class="offline-banner" role="status"><svg class="icon" data-size="sm" aria-hidden="true"><use href="../../packages/ui/icons/icons.svg#wifi-off"/></svg>Offline – du siehst den Stand von heute 07:42</div>

Prepared in the shell (hidden)

Data

render({
  "hidden": true
})

Markup

<div class="offline-banner" role="status" hidden><svg class="icon" data-size="sm" aria-hidden="true"><use href="../../packages/ui/icons/icons.svg#wifi-off"/></svg>Offline – Änderungen werden gespeichert und später übertragen</div>

Data contract

What render(data) accepts — validated against this JSON Schema in development and tests. Unknown fields are rejected. The same schema is in components.json.

Field	Type	Required	Default	Description
`message`	`string`	optional	`"Offline – Änderungen werden gespeichert und später übertragen"`	Banner text. min 1 chars
`hidden`	`boolean`	optional	`false`	Render with the `hidden` attribute (shell toggles it on online/offline).

JSON Schema

{
  "type": "object",
  "additionalProperties": false,
  "required": [],
  "properties": {
    "message": {
      "type": "string",
      "minLength": 1,
      "default": "Offline – Änderungen werden gespeichert und später übertragen",
      "description": "Banner text."
    },
    "hidden": {
      "type": "boolean",
      "default": false,
      "description": "Render with the `hidden` attribute (shell toggles it on online/offline)."
    }
  }
}

Markup & states

Root: div.offline-banner — usable without render() by writing the markup directly.

Attributes

Attribute	Values	Default	Description
`role="status"`	`—`	—	Polite announcement when it appears.
`hidden`	`—`	—	Not shown while online.

Parts

Part	Description
`svg.icon`	Small `wifi-off` icon (decorative).

Behaviour & events

Module: (app shell)

No built-in behaviour. addEventListener("offline", () => banner.hidden = false) and ("online", () => banner.hidden = true); set the initial state from navigator.onLine.

Accessibility

role="status": appearing is announced politely, without stealing focus.
Warning colours plus text and icon — not colour alone.

Guidance

DoKeep the app usable offline and say so.

DoPair it with the save status for counts and failures.

Don'tDon't block the screen or show a dialog when the connection drops.

Don'tDon't use alarming words ("Fehler", "Verbindung verloren!").

Related: Save status · Alert / banner · App shell