Components › States & feedback › Status › Status banner

Status banner

canon

One sentence about the state of a page or a record, with an optional glyph, actions and dismiss; tones neutral, accent, positive, critical (no warning tone).

Owner approved wave A on 4 Oct 2026 (acrm !4579) and wave B on 6 Oct 2026 (acrm !4794, prototype proto/status-banner-b@83b789cc6). Wave A replaced .resv*, .fin-gap-banner, .zav-bez-smlouvy, .imp-reserved, .sr-rep-banner. Wave B replaced the dialog and accounting boxes .acc-fail (4 copies), .acc-warn, .acc-inv-warn, .pay-item-detail__warn, .aichat-warn, .ppf-conflict-title, .tl-log-fail; added title (tone only on glyph + title, body --fg) and actionsPlacement=below (RULES §15.6). No warning tone (RULES §15). Out of scope: .acrm-imp-banner, .dg-strip, .deal-cta; import K ověření / Konflikty still on .imp-reserved CSS until the owner decides. Dev checks: 4 Oct Závazky critical 1:1 with real data; 6 Oct Nová analytika rejected save = critical compact in the dialog, 1440/390 light/dark, brown 0, old classes 0. Other wave-B states not reachable with dev data (verified on fixtures in !4794, 46/52 pairs 0 px). Registry repaired 17 Oct 2026 (review F5): GoogleConnectBanner, RelationshipStatusBanner, RepBanner live in apps/web (see files), not exported by @acrm/ui; dropped from react[].

Used in 40 files · 26 areas · 69× — components/accounting, components/ai-employees, components/assistant, components/callwrapup, components/clen-tymu, components/decisions …

@acrm/ui <StatusBanner>.acrm-statusbanner .acrm-statusbanner.compact .acrm-statusbanner.is-neutral .acrm-statusbanner.is-accent +4SourceStory
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • The banner itself is not focusable; Tab reaches its actions and the dismiss cross in reading order.
  • The dismiss cross is a DS IconButton (Enter / Space).

ARIA

  • role="status" by default (polite live region) — a state that appears with the page or after a run.
  • role="alert" only for an error that has just happened and needs immediate attention.
  • The glyph is decorative; the meaning is in the sentence (and in the tone for sighted users only as reinforcement).
  • The dismiss cross has an accessible name (dismissLabel, default „Skrýt").
  • dot is aria-hidden; the sentence must say the same thing without it.

Focus

Actions and the cross use the DS button focus ring; the banner adds none of its own.

Contrast

  • Text: --fg-secondary on --surface-100 (neutral), --accent-ink on --accent-tint, --positive-ink on --positive-subtle, --critical-ink on --critical-subtle — all AA for --small.
  • The critical glyph is --critical (non-text contrast ≥ 3 : 1).
  • No amber text anywhere (RULES §15).

Known limits

  • One banner = one sentence; long lists belong in the page, not in the banner.
  • Colour is never the only signal: the glyph and the sentence carry the state.

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