synthetic
NoticeBar
A full-width strip at the top of a view that stays until dismissed, scrolling if the text is too long.
Payroll noticeDismiss it, then bring it back
Payroll cut-off is 28 Oct. Send the rota export by then.
Mobile design review is on 22 Oct, 14:00.
Offline: changes will sync when you reconnect.
Harbour launch moved to 24 Oct 09:00. Everyone on the Harbour rebrand: check your tasks, confirm the launch checklist and tell Maya about anything still open.
Harbour launch moved to 24 Oct 09:00. Everyone on the Harbour rebrand: check your tasks, confirm the launch checklist and tell Maya about anything still open.
Crew interviews are late.
In context
Pinned to a screenUnder the app bar, above the content
Projects
Payroll cut-off is 28 Oct.
Tideline mobileDue 7 Nov
Offline tasks and a quiet inbox for the crew.
Inbox
You are offline. Changes sync when you reconnect.
3 changes waiting to sync.
Banner variant
Status stripvariant="banner": a plain full-width strip with centred text; colours and padding from --rebar-notice-bar-banner-*
You're offline.
You're offline. Ask needs a connection. Readings and prayers you've opened are still available.
Pass-through mode
Props
| Prop | Type | Required | Default |
|---|---|---|---|
tone | NoticeBarTone | undefined | No | default |
content | ReactNode | Yes | — |
icon | ReactNode | No | — |
action | ReactNode | No | — |
closable | boolean | undefined | No | false |
onClose | (() => void) | undefined | No | — |
onClick | (() => void) | undefined | No | — |
wrap | boolean | undefined | No | false |
variant | "default" | "banner" | undefined | No | default |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
data-rebar-* attributes
data-rebar-component="notice-bar" with data-rebar-tone set to the current tone; parts: icon, content, text (the actual scrolling/static text node), action, close.
Migrating to Ant Design
Not codemod-covered — this is the antd-mobile NoticeBar pattern. AntD desktop has no direct equivalent; closest is a full-width Alert with banner styling.