Status banner
canonOne 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 +4SourceStoryImport
import { StatusBanner } from '@acrm/ui'Props
StatusBanner packages/ui/src/components/StatusBanner.tsx
| Name | Type | Default | Description |
|---|---|---|---|
tone | 'neutral' | 'accent' | 'positive' | 'critical' | 'neutral' | Tón stavu. warning ZÁMĚRNĚ není (RULES §15, zadavatel 3. 10. 2026: hnědá nikdy) — varování je critical s alert-square-rounded, informace o tom, co se nestalo, je neutral + dot. |
density | 'default' | 'compact' | 'default' | default = pruh na stránce nebo v detailu (sp-3 sp-4, radius-lg, linka) — vzhled dnešního rezervačního pruhu. compact = v dialogu a ve formuláři (sp-3, radius-sm, bez linky), ať dialog nebobtná (AD 4. 10. 2026). |
icon | string | — | Glyf před větou (DS sada). |
dot | boolean | — | Oranžová tečka místo glyfu — informace, ne poplach (náhrada tónu warning). |
title | ReactNode | — | Krátký titulek v tónu (critical = jediné červené vedle glyfu). Tělo (children) je pak neutrální --fg / --fg-secondary a glyf stojí u titulku nahoře. Pro víceřádkový obsah — odstavec červeně je přesně „vše červené" (zadavatel 4. 10. 2026, RULES §15.6). |
children | ReactNode | — | Věta stavu; <b> v ní nese jméno nebo číslo. Může nést i krátký výčet pod větou. |
actions | ReactNode | — | Akce vpravo (DS Button); na úzké ploše se samy zalomí pod text. |
actionsPlacement | 'end' | 'below' | 'end' | below = akce vždy pod textem (rozhodnutí s delším vysvětlením, např. konflikt návrhu AI). |
onDismiss | () => void | — | Křížek „Skrýt" — jen u pruhu, který jde zavřít (výzva, ne stav). |
dismissLabel | string | 'Skrýt' | — |
role | 'status' | 'alert' | 'status' | status (výchozí) · alert u chyby, která právě nastala. |
className | string | — | — |
CSS classes
Files
packages/ui/src/components/StatusBanner.tsxapps/web/src/components/GoogleConnectBanner.tsxapps/web/src/components/RelationshipStatusBanner.tsxapps/web/src/components/sales-reports/RepBanner.tsxapps/web/src/ds/status-banner.css