# Alert

Alerts are useful components for displaying important messages while users are in the app itself

![Demonstration of how an Alert looks on Android, iOS and Web](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MJW9KJEAGCC8ml4vVuN%2F-MJWGJlS9cXYJXmWp7RD%2Falertdemo.jpg?alt=media\&token=a55dadd3-5708-41ad-b5a8-2e4b95ca3830)

## One Button Alert

A one button alert, also known as a notification, displays a message and one button to confirm user has viewed the message

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LFtI7DOVrf3zz2eWZ42%2F-LFy3UPrgcw29UiLCW_x%2FThunkable%20Docs%20Exhibits%20\(15\).png?alt=media\&token=8a1577b2-7204-4f3d-be65-5137d369d073)

To set up an alert, simply fill in the following `simple` properties. The Cancel Button Text only needs to be filled out for a two-button alert. You can use blocks to start an event when

| Property            | Description               |
| ------------------- | ------------------------- |
| Title               | The title of the alert    |
| Message             | The subtitle of the alert |
| Confirm Button Text | The text of the button    |
| Cancel Button Text  | `LEAVE BLANK`             |

## Two button alert

Two button alerts have two buttons, one that dismisses the notification and one that can be programmed to start an event

To set one up, simply add the following `simple` properties

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LFtI7DOVrf3zz2eWZ42%2F-LFy79VAEK7RLxROQAjk%2FThunkable%20Docs%20Exhibits%20\(14\).png?alt=media\&token=c6fc4a62-e587-4a2b-a554-e836a5280cb9)

| Property            | Description                                                                                                   |
| ------------------- | ------------------------------------------------------------------------------------------------------------- |
| Title               | The title of the alert                                                                                        |
| Message             | The subtitle of the alert                                                                                     |
| Confirm Button Text | The text of the right confirm button; If the `danger` switch is turned on, the text will be in red (iOS only) |
| Cancel Button Text  | The text of the left cancel button                                                                            |

If you want to start an event from a confirm button, you will want to add the blocks below:

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MYdQNMWQn8MBGnS7vaQ%2F-MYdQ_1g3Gl_x_4lheml%2Fimage.png?alt=media\&token=1bfd7b1f-5736-4c31-8a5e-c71f21b92d9b)

## Button List: Alert with three or more buttons

It is possible to add buttons to an alert for more sophisticated use cases.\
This can be done using the `set Button List to` block by creating a [list](https://docs.thunkable.com/snap-to-place/lists) of [objects](https://docs.thunkable.com/snap-to-place/objects).

You can set the **Text** of the Alert. You can set the **Style** of the Alert to **ok, destructive** or **cancel.**

On iOS, the Alert can show more than 3 Buttons.\
On Android, the Alert can show up to 3 buttons. If more than 3 buttons are specified, the first 3 will be shown. <br>

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MYdQs_ir6LFvPNoF-fq%2F-MYdRDpGf9cOyBAyUzN9%2FScreen%20Shot%202021-04-19%20at%2010.23.10%20AM.png?alt=media\&token=ed813426-8b13-4823-9dc7-bded7e29fe59)

![A three button alert displayed on Android and iOS devices](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LFyHNozTRxRWKqwWLHe%2F-LFyI_oR57U0HKgtulVS%2FThunkable%20Docs%20Exhibits%20\(16\).png?alt=media\&token=321a2c11-4fd3-4557-bde5-d6199eb40755)

| Property         | Description                                                                                                                                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| Title            | The title of the alert                                                                                                                           |
| Message          | The subtitle of the alert                                                                                                                        |
| Text `Advanced`  | The text of the button                                                                                                                           |
| Style `Advanced` | The style of the button; `ok` is a confirm button, `cancel` is a cancel button and `destructive` is a confirm button with text in red (iOS only) |

The 'showButtonList' block will return an output called 'buttonPressed'.\
This will return the position of the Button in your Button List.\
You can take some action based on which button was pressed.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MYdQNMWQn8MBGnS7vaQ%2F-MYdQfM62WSDRkWGrbka%2Fimage.png?alt=media\&token=ed6d82e0-3e21-4ecc-8838-d79eac58d253)

Note: the Buttons may appear in a different order when testing the app on a device. \
The number that ‘buttonPressed’ returns is the order that the Buttons are added in the app project.