Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Alert
  3. Usage

Alert

Usage

Alert is the inline status primitive that replaces ui-core Callout (AL-1). The story describes it as highlighting an important message for a section, with an icon and semantic copy color, not color alone (AC-1). title is required. description is optional supporting copy (AL-2). type defaults to AlertType.Note and selects the semantic intent for paint, icon, and ARIA role. layout defaults to AlertLayout.Columns. AlertLayout.Columns puts the icon in the first column and the title, description, and actions in the second. AlertLayout.Rows puts the icon, title, and actions on the first row and the description on the second (AL-3). The component is a Box grid plus FlexBox, not a Radix Themes Callout (AL-4). Set dismissible together with onDismiss to show a dismiss control. dismissTitle is required in that case and names the control. ctaButton is an optional action beside dismiss (label, onClick, disabled, loading). When dismiss is uncontrolled, Alert hides itself after dismiss.
Example
Copy in the example is the English story dictionary (alert.errorTitle, alert.description, alert.dismiss). Pass localized messages in the app.
Previous
Actions / Accessibility
Next
Alert / API and Development
On this page
Example