# Alert dialog

> An alert dialog is a small modal window that interrupts a mobile screen to report a problem or ask for a decision. iOS calls it an Alert and Material 3 calls it a Dialog.

Page: https://www.appetiteui.com/glossary/alert-dialog. Alert vs dialog: iOS Alert and Material 3 Dialog. Also called Alert, Dialog, Confirmation dialog.

## Why it matters

An alert stops the task, so every alert spends the person’s attention. Apple asks for alerts only when the information is essential and the person can act on it.

It is also the pattern most often misused: for news, at launch, or for an action that could simply be undone.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Alert | Dialog: basic, list and scrollable list | Alert and Modal |
| Dialog corner | 12 pt | 28 dp | `platform/dialog/corner` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Dialog | iOS / Alert, 300 wide at radius 32 | M3 / Basic dialog, 304 wide at radius 24 | Material has Basic, List and Scrollable list dialogs, iOS draws the alert as glass |

## In Appetite UI

Appetite UI has two components for it. Alert is the status dialog, with the types Verified, Error, Success and Warning, and Modal is the centered decision with a content slot. Both read their surface and text from semantic tokens, bg/raised, text/strong-950 and text/sub-700.

The Platform variable platform/dialog/corner moves the corner when a frame switches between iOS and Android.

## Example

A notes app asks before throwing away an unsaved draft: the title “Discard Draft?”, the buttons Cancel and Discard. On iOS the two buttons sit side by side with the likely choice on the trailing side.

## Common mistakes

- Using an alert only to inform. If nothing is for the person to decide, show the message in context instead.
- Titling the main button OK or Yes. Name the result, such as Discard or Convert; keep OK for purely informational alerts.
- Opening an alert at launch. Show cached content and a quiet label instead.
- Writing a title that wraps past two lines or reads “Error”. State what happened and why.

## Questions

### What is the difference between an alert and an action sheet on iOS?

An alert reports a situation or asks to confirm one action; an action sheet offers several choices that belong to an action the person started. Apple’s own example is cancelling a mail draft: delete, save or keep editing is an action sheet.

### Is a Material 3 dialog the same as an iOS alert?

Both are modal windows that stop the task for a decision, but Material 3 has three kinds: basic, list and scrollable list. iOS has the one Alert with a title, optional text and up to three buttons.

## Sources

1. [Apple Human Interface Guidelines: Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts)
2. [Material Design 3: Dialogs](https://m3.material.io/components/dialogs/overview)
3. [Material Components for Android: Dialog](https://github.com/material-components/material-components-android/blob/master/docs/components/Dialog.md)

## Related

- Docs: [Alert](https://www.appetiteui.com/docs/alert)
- Docs: [Modal](https://www.appetiteui.com/docs/modal)
- Docs: [Material 3](https://www.appetiteui.com/docs/material-3)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)
- Glossary: [Action sheet](https://www.appetiteui.com/glossary/action-sheet)
- Glossary: [Bottom sheet](https://www.appetiteui.com/glossary/bottom-sheet)
- Glossary: [Toast and snackbar](https://www.appetiteui.com/glossary/toast-snackbar)
- Glossary: [Permission request](https://www.appetiteui.com/glossary/permission-request)