> For the complete documentation index, see [llms.txt](https://docs.criticalmoments.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.criticalmoments.io/actions-in-app-messaging/alerts.md).

# Alerts

### Example Alerts

<figure><img src="/files/y9QaylRx6Z2PhuT7Xd7W" alt=""><figcaption><p>One button, two button, red button, blue button (Dialog, two button dialog, "large" style action sheet, and a many-option dialog)</p></figcaption></figure>

### How alerts work

Tapping any button dismisses the alert. If an action name is associated with the tapped button, Critical Moments triggers that action.

### Alert Action Config

An alert has actionType `alert` and an actionData object with the following keys:

* `title` \[string, optional]: The title of the alert. May be empty, but you must have a title and/or a message, both can't be omitted.
* `style` \[sting, optional]: one of "dialog", or "large". Defaults to dialog if omitted. See above for visual examples of each style.
* `message` \[string, optional]: The message body of the alert. May be empty, but you must have a title and/or a message, both can't be omitted.
* `showOkButton` \[bool, optional]: If true, show an "OK" button. Defaults to true if omitted. Defaults to no action, but an action can be set with `okButtonActionName`
  * You should use this property over a custom button with an "OK" string because it follows system conventions for OK buttons: placement in button order, and bold treatment.&#x20;
  * It will localize using the system standard "OK" string.
* `okButtonActionName` \[string, optiona]: the name of an action, which is fired when the user taps the okay button. No action is fired if this is omitted.
* `showCancelButton` \[bool, optional]: If true, show an "Cancel" button which dismisses the alert. Defaults to false if omitted.
  * You should use this property over a custom button with an "Cancel" string because it follows system conventions for Cancel buttons regarding placement in the alert.&#x20;
  * It will localize using the system standard "Cancel" string.
* `customButtons` \[array, optional]: an array of custom button objects with the following keys:
  * `label` \[string, required]: the label of the button
  * `actionName` \[string, optional]: the action to fire when the button is tapped
  * `style` \[string, optional]: the style of the alert button. One of "default", "destructive" (red) or "primary" (bold). Only one button can be primary on iOS - the last button you specify as primary (including OK) will get the primary treatment. See above for visual examples. Defaults to "default" if omitted.

### Design Considerations

Alerts have more design considerations than you'd expect! Critical Moments is designed to make it easy to comply with the [Apple Human Interface guide for alerts](https://developer.apple.com/design/human-interface-guidelines/alerts).

* A Title and/or body is required. Neither is not allowed. Both are suggested.
* You must have at least 1 button: OK, or a custom button. No buttons or a single cancel button are not valid
* The Apple suggested position and font-weight of the OK and Cancel buttons changes based on platform (phone vs iPad), layout (dialog vs large) and which other buttons are present. Using the options showOkayButton/showCancelButton will ensure these buttons follow platform standards, and is highly recommended over custom buttons with the label "OK"/"Cancel".
* There is no theme support for alerts, they use the system native alert look

### Example Config

The config below from the Sample App generated the alerts in the screenshots above.

```
"show_notice_alert": {
    "actionType": "alert",
    "actionData": {
        "title": "A simple notice alert",
        "message": "Title, message, okay button. You get the idea!"
    }
},
"show_cancelable_alert": {
    "actionType": "alert",
    "actionData": {
        "title": "A cancelable alert",
        "message": "An alert with a cancel button... not exactly rocket science.\n\nTry both buttons to see what they do.",
        "showCancelButton": true,
        "okButtonActionName": "nested_alert"
    }
},
"custom_button_alert_large": {
    "actionType": "alert",
    "actionData": {
        "title": "Action sheet deep dive",
        "message": "This is an action sheet with several options.\n\nEach can launch a custom action!",
        "showOkButton": false,
        "showCancelButton": true,
        "style": "large",
        "customButtons": [
            {
                "label": "Option 1",
                "actionName": "nested_alert"
            },
            {
                "label": "Option 2",
                "actionName": "nested_alert"
            },
            {
                "label": "Option 3",
                "actionName": "nested_alert"
            },
            {
                "label": "Option 4",
                "actionName": "nested_alert"
            },
            {
                "label": "Scary option",
                "actionName": "nested_alert",
                "style": "destructive"
            }
        ]
    }
},
"custom_button_alert_dialog": {
    "actionType": "alert",
    "actionData": {
        "title": "Lots of options",
        "message": "This is an alert with several buttons of different styles.",
        "showOkButton": false,
        "showCancelButton": true,
        "customButtons": [
            {
                "label": "Normal button",
                "actionName": "nested_alert"
            },
            {
                "label": "Primary button",
                "actionName": "nested_alert",
                "style": "primary"
            },
            {
                "label": "Scary button",
                "actionName": "nested_alert",
                "style": "destructive"
            }
        ]
    }
},
```