Status banner

One sentence about the state of a record or a page, with an optional glyph, actions and a dismiss cross. StatusBanner from @acrm/ui, styles .acrm-statusbanner in apps/web/src/ds/status-banner.css. Replaced the reservation strip .resv*, the Google / chat prompts, the finance check strips (.fin-gap-banner, .zav-bez-smlouvy), the import summary strips (.imp-reserved) and the rep strip on Reports (owner approval 4 Oct 2026, acrm !4579), then the boxes in dialogs and accounting — .acc-fail, .acc-warn, .acc-inv-warn, .pay-item-detail__warn, .aichat-warn, .ppf-conflict-title, .tl-log-fail (owner approval 6 Oct 2026, acrm !4794).

When to use

  • A page or a detail needs to say one thing about its state: incomplete data, a missing contract, a disconnected channel, whose numbers you are reading.
  • A short prompt to act (connect Google, reconnect a chat) that may be dismissed.
  • A result summary line after a run (import: added to a segment, kept by other reps).

When not to use

  • Field-level validation — use the field's error line.
  • A toast for something that just happened and needs no further attention.
  • A panel with several parts (who, note, actions in a column) — that is not a status sentence (.dg-strip, delegation).
  • A call-to-action card for the next step (.deal-cta).

Tones

  • neutral — information; the glyph carries the meaning (lock = shared / restricted, user = someone else's numbers).
  • accent — a prompt to act or a task to check.
  • positive — done.
  • critical — only what needs a decision now: always alert-square-rounded, glyph --critical, title --critical-ink. With a title, the body stays --fg — red is the glyph and the short title only (RULES §15.6).
  • Colour carries priority, not category: a failed save or an unbalanced balance sheet is critical; notes before issuing, exchange rates, a locked VAT period or a cancelled document are neutral.
  • There is no warning tone (RULES §15: brown never). Information that something did not happen is neutral, never amber.

Density

  • default — a strip on a page or in a detail: sp-3 sp-4, radius-lg, 1 px line, --small.
  • compact — a box inside a dialog or a form: sp-3, radius-sm, no line, so the dialog does not grow.

Anatomy

  1. Glyph (or dot — a small orange dot instead of a glyph; never both).
  2. Sentence — <b> carries the name or the number in --fg on neutral. Or title (short, in tone, weight 600) + body under it in --fg; the glyph then sits at the first line.
  3. Optional short list under the sentence — neutral colour.
  4. Actions on the right (DS Button); on a narrow surface they wrap under the text by themselves. actionsPlacement="below" puts them under the text always — for a decision with a longer explanation (AI suggestion conflict on a product).
  5. Dismiss cross (onDismiss) — only for prompts, never for a state.

Best practices

Do

  • One sentence. Put the name or number in <b>.
  • Use critical + alert-square-rounded for anything the user must act on to avoid a loss.
  • Keep explanations in an InfoTip next to the title, not as a paragraph in the strip.

Don't

  • No amber / brown warning.
  • No glyph and dot together.
  • No second paragraph of explanation (RULES §14).
  • Don't stack several banners for one cause — merge them into one sentence or one banner with a title and a list (payroll: run and employee warnings in one banner above the table).
  • No paragraph in red — a multi-line critical needs a title.

Content

State first, then the consequence: „Výpis nemusí být úplný — 1 podezřelý úsek". Prompts start with the verb: „Propojte Google a CRM ožije".

File drop · Progress · Stat tile · Toast

Source: docs/status/status-banner.usage.md · GitLab