Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Blocks
  2. Banner Region
  3. API and Development

Banner region

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Import
Load @prepared911/ui/styles.css once at the document root.
BannerRegion
NameRequiredDescription
noticesyesActive notices (S4 or S5 only).
dismissedyes{ id, version }[] hidden for this person.
onDismissyesCalled when an S4 notice is dismissed.
onGoToyesCalled when a notice go-to action is activated.
regionLabelyesAccessible name of the region.
pagerLabelyesAccessible name of the pager landmark. Differs from regionLabel.
pageStatusyes(index, total) => LocalizedMessage for the pager: its visible count and live status, such as "1/2".
previousLabelyesAccessible name and tooltip of the icon-only Previous control, such as "Previous".
nextLabelyesAccessible name and tooltip of the icon-only Next control, such as "Next".
dismissLabelyesDismiss control name (S4).
modeyesBannerRegionMode.Interactive or ReadOnly.
rotationIntervalMsread-onlyMilliseconds between advances; required when mode is read-only.
NameTypeDefaultDescription
dismissedreadonly BannerRegionDismissedNotice[]—Notices hidden for this person until the version changes.
dismissLabelLocalizedMessage—Accessible name of the dismiss control on degraded notices.
modeBannerRegionMode—Interactive paging and S4 dismissal. Read-only rotation; requires {@link rotationIntervalMs}.
nextLabelLocalizedMessage—Accessible name and tooltip of the icon-only control that shows the next notice, such as "Next". Leave "banner" out.
noticesreadonly BannerRegionNotice[]—Active notices the shell resolved; the region orders and filters them.
onDismiss(notice: BannerRegionNotice) => void—Called when the person dismisses a degraded (S4) notice. The shell records {@link BannerRegionDismissedNotice} and passes it back through {@link dismissed}.
onGoTo(notice: BannerRegionNotice) => void—Called when the person activates a notice go-to action; the host opens the destination.
pagerLabelLocalizedMessage—Accessible name of the pager's nav landmark. It differs from {@link regionLabel}, which names the group that holds the banner and the pager, so the two landmarks never share a name. Shown only while more than one notice is live in {@link BannerRegionMode.Interactive}.
pageStatus(index: number, total: number) => LocalizedMessage—Status text for the pager, such as "2/5". It is the pager's visible count and the text of the region's persistent polite status, so it must read on its own.
previousLabelLocalizedMessage—Accessible name and tooltip of the icon-only control that shows the previous notice, such as "Previous". Leave "banner" out.
regionLabelLocalizedMessage—Accessible name of the region that groups the banner and optional pager.
rotationIntervalMsnumber—Milliseconds between automatic advances; required in read-only mode.
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Notice shape
Compatible with core BannerNotice (@prepared911/core/notifications). UI-owned enums use the same string values (S4, S5, now, held, global, targeted).
FieldDescription
announceBannerRegionAnnounce.Now announces with severity-derived urgency; Held paints silently until replaced with Now, which announces once without remounting the banner.
audienceOpaque resolved specificity: Targeted sorts ahead of Global at the same severity.
goToOptional single action label; onGoTo receives the full notice.
Previous
Banner region / Usage
Next
Banner region / Accessibility
On this page
Import
BannerRegion
Notice shape