Skip to main content

Modal - Native

A system native modal that displays critical notifications, or messages within an app, adhering to platform design guidelines.

Dos and Don'ts

Do
  • Use the modal-native for alerting users about critical information or errors.
Don't
  • Don't use Modal-native components for anything other than system prompted notifications. For other types of messages use the custom Modal (Alert) instead.

Anatomy

iOS 18 and older

Anatomy of a native modal that contains a title, body, and actions.
  1. Title: Concise heading for clarity.
  2. Body: The main message or information.
  3. Action 1: Main action for user interaction.
  4. Action 2 (Optional): Secondary action option.
  5. Action 3 (Optional): Tertiary action option.
  6. Background: Bounding box for the alert's content.

iOS 26 and later

Anatomy of a native modal that contains a title, body, and actions.
  1. Title: Concise heading for clarity.
  2. Body: The main message or information.
  3. Action 1: Main action for user interaction.
  4. Action 2 (Optional): Secondary action option.
  5. Action 3 (Optional): Tertiary action option.
  6. Liquid Glass container: Bounding box for the alert's content.

Variants (only iOS 26 and later)

Light

A light variant of a native modal in iOS 26 and later.

Dark

A dark variant of a native modal in iOS 26 and later.

Modifiers

No body

You can use a native dialog with no body for quick confirmation messages, alerts, notifications or confirmation prompts where the title alone is enough.

Example of a native modal with no body that contains a title and actions.

Side by side call to Action

You can use side-by-side calls to action when space is limited or when both actions are equally important. This is often seen in confirmation prompts for efficient interaction, like "OK" and "Cancel."

Example of a native modal with side-by-side calls to action.

Interactions

Closing the dialog

Tapping outside the dialog's boundaries will close it, providing an intuitive way to dismiss it without interacting with specific UI elements like calls to action (unless that is otherwise specified by the interaction).

Example of a native modal being closed by tapping outside its boundaries.

Content

Title

  • Ensure the content follows platform specific wording

Body

  • Ensure the content follows platform specific wording

Calls to action

  • Ensure the content follows platform specific wording

Examples

LTR examples

Here's an example of a Dialog in the LTR context:

Example of a native modal in LTR context.

RTL Examples

Here's an example of a Dialog in the RTL context:

Example of a native modal in RTL context.
Back to top