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

Alert

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Import Alert, AlertLayout, and AlertType from @prepared911/ui/alert.
PropDefaultMeaning
titlerequiredPrimary message. LocalizedMessage.
descriptionOptional supporting copy. LocalizedMessage.
typeAlertType.NoteSemantic variant for paint, icon, and ARIA role.
layoutAlertLayout.ColumnsColumns or Rows.
dismissibleWith onDismiss, shows a dismiss control.
dismissTitleAccessible name for dismiss. Required when dismissible is true.
onDismissCalled when the user dismisses the alert.
ctaButtonOptional action beside dismiss: label, onClick, disabled, loading.
rolefrom typenote, alert, or status.
aria-labelAccessible name when the title is not enough.
classNameConsumers do not pass className; use Alert props or find-pattern.
refRef to the root element.
style and children are excluded. Other native div attributes pass through.
Example
Props
NameTypeDefaultDescription
titleLocalizedMessage—Primary message.
aria-labelLocalizedMessage—Accessible name for the root when title alone is insufficient.
classNamestring—@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
ctaButtonAlertCtaButton—Optional CTA beside dismiss.
descriptionLocalizedMessage—Optional supporting copy beneath the title.
dismissibleboolean—When true with {@link AlertDismissProps.onDismiss}, shows a dismiss control.
dismissTitleLocalizedMessage—Accessible name for the dismiss control. Required when {@link AlertLayoutProps.dismissible} is true.
layoutAlertLayout—Layout variant. Defaults to {@link AlertLayout.Columns}.
onDismiss(() => void)—Called when the user dismisses the alert.
refRef<HTMLDivElement>—Ref to the root element.
role"note" | "alert" | "status"—ARIA role override.
typeAlertType—Semantic variant. Defaults to {@link AlertType.Note}.
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Previous
Alert / Usage
Next
Alert / Accessibility
On this page
Example
Props
Storybook