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.
onOpenLinkyesCalled when a notice link 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 of 2".
previousLabelyesVisible label of the Previous control, such as "Previous".
nextLabelyesVisible label of the 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—Visible label of the 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}.
onOpenLink(notice: BannerRegionNotice) => void—Called when the person activates a notice link 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 of 5". It is the pager's visible count and its polite live status, so it must read on its own.
previousLabelLocalizedMessage—Visible label of the 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.
classNamestring—Optional module class from colocated CSS.
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, global, targeted).
Previous
Banner region / Usage
Next
Banner region / Accessibility
On this page
Import
BannerRegion
Notice shape