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.
descriptionnoSupporting copy for the overlay alert.
goTonoOverlay-path go-to action.
notificationIdyesStable router notification id.
fallbackInlineAlertTitleyesInline alert title on the fallback path.
fallbackInlineAlertDescriptionnoInline alert description on the fallback path.
childrennoRegion content; inert only on the overlay path.
AreaOverlay
NameRequiredDescription
activeyesShows the error alert and inert content when true.
regionLabelyesAccessible name of the affected region.
titleyesPrimary error message.
descriptionnoSupporting copy under the title.
goTono{ label, onPress }; does not dismiss the overlay.
notificationIdnoStable router notification id for host wiring.
childrennoRegion content; inert while active.
NameTypeDefaultDescription
activeboolean—When true, shows the inline error alert and makes {@link AreaOverlayProps.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.
goToAreaOverlayGoTo—Optional go-to action; never dismisses the overlay.
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