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

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".

Related

File drop · Progress · Stat tile · Toast