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

Area overlay

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.
AreaNotificationEffectSurface
NameRequiredDescription
renderingyesOutput of resolveAreaEffectRendering from @prepared911/core/notifications.
regionLabelyesAccessible name of the affected region on the overlay path.
titleyesPrimary message for the overlay alert and fallback banner.
descriptionyes*Overlay alert copy; says what to do next when there is no goTo.
goToyes*Go-to call to action on the overlay alert and on the fallback inline alert; never dismisses.
notificationIdyesStable router notification id.
fallbackInlineAlertTitleyesInline alert title on the fallback path.
fallbackInlineAlertDescriptionyes*Inline alert description on the fallback path; says what to do next when there is no goTo.
childrennoRegion content; inert only on the overlay path.
* Pass goTo, or pass both description and fallbackInlineAlertDescription (AreaNotificationEffectSurfaceRecoveryProps). Which path renders is known only at runtime, so copy-only recovery covers both. Omitting it is a type error.
AreaOverlay
NameRequiredDescription
activeyesShows the error alert and inert content when true.
regionLabelyesAccessible name of the affected region.
titleyesPrimary error message.
descriptionyes*Supporting copy under the title; says what to do next when there is no goTo.
goToyes*{ label, onPress }; does not dismiss the overlay.
notificationIdnoStable router notification id for host wiring.
childrennoRegion content; inert while active.
* Pass goTo, description, or both (AreaOverlayRecoveryProps). Omitting both is a type error.
NameTypeDefaultDescription
activeboolean—When true, shows the inline error alert and makes {@link AreaOverlayBaseProps.children} inert. When false, renders children only with no alert.
regionLabelLocalizedMessage—Accessible name of the affected region (role="group").
titleLocalizedMessage—Primary error message in the inline alert.
childrenReactNode—Region content; inert while active.
classNamestring—@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
descriptionLocalizedMessage—Supporting copy under the title. Supporting copy under the title that says what the person can do next.
goToAreaOverlayGoTo—Go-to action; never dismisses the overlay. Absent: {@link AreaOverlayDescriptionRecovery.description} carries the recovery.
notificationIdstring—Stable notification id from the router effect, for host wiring and tests. Does not appear in visible copy.
refRef<HTMLDivElement>—Ref to the root element.
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Registry
createAreaOverlayRegistry(registeredAreas) returns { has(area) } for resolveAreaEffectRendering on @prepared911/core/notifications. Pass the result with notification copy to AreaNotificationEffectSurface. emptyAreaOverlayRegistry registers nothing.
Previous
Area overlay / Usage
Next
Area overlay / Accessibility
On this page
Import
AreaNotificationEffectSurface
AreaOverlay
Registry