---
modificationDate: May 06, 2026
title: ConfirmationDialog
description: A SwiftUI ConfirmationDialog component for presenting confirmation prompts.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-56/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['ios', 'tvos', 'expo-go']
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v56.0.0/sdk/ui/swift-ui/confirmationdialog/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# ConfirmationDialog

A SwiftUI ConfirmationDialog component for presenting confirmation prompts.
iOS, tvOS, Included in Expo Go

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

Expo UI ConfirmationDialog matches the official SwiftUI [confirmationDialog API](https://developer.apple.com/documentation/swiftui/view/confirmationdialog\(_:ispresented:titlevisibility:actions:message:\)) and presents an action sheet-style dialog with a title, actions, and an optional message.

## Installation

```sh
npx expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview), make sure to [install `expo`](/bare/installing-expo-modules) in your project.

## Usage

### Basic confirmation dialog

Use `ConfirmationDialog.Trigger` to define the visible element and `ConfirmationDialog.Actions` to provide the dialog buttons.

```tsx
import { useState } from 'react';
import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui';

export default function BasicConfirmationDialogExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <ConfirmationDialog
        title="Are you sure?"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button label="Show Dialog" onPress={() => setIsPresented(true)} />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button label="Confirm" onPress={() => setIsPresented(false)} />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
      </ConfirmationDialog>
    </Host>
  );
}
```

### Destructive action confirmation

Use `role="destructive"` on a `Button` inside `ConfirmationDialog.Actions` to style it as a destructive action.

```tsx
import { useState } from 'react';
import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui';

export default function DestructiveConfirmationDialogExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <ConfirmationDialog
        title="Delete Item?"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button label="Delete" role="destructive" onPress={() => setIsPresented(true)} />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button
            label="Delete"
            role="destructive"
            onPress={() => {
              console.log('Deleted');
              setIsPresented(false);
            }}
          />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>This action cannot be undone.</Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}
```

### With message and multiple actions

Use `ConfirmationDialog.Message` to display a descriptive message below the title, and include multiple action buttons for different choices.

```tsx
import { useState } from 'react';
import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui';

export default function MultiActionConfirmationDialogExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <ConfirmationDialog
        title="Save Changes?"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="visible">
        <ConfirmationDialog.Trigger>
          <Button label="Close Document" onPress={() => setIsPresented(true)} />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button label="Save" onPress={() => console.log('Saved')} />
          <Button label="Discard" role="destructive" onPress={() => console.log('Discarded')} />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>You have unsaved changes. What would you like to do?</Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}
```

### Hidden title

Set `titleVisibility="hidden"` to hide the dialog title while still showing the actions and message. You should still provide a `title` for accessibility.

```tsx
import { useState } from 'react';
import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui';

export default function HiddenTitleConfirmationDialogExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <ConfirmationDialog
        title="Hidden Title"
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        titleVisibility="hidden">
        <ConfirmationDialog.Trigger>
          <Button label="Show Dialog" onPress={() => setIsPresented(true)} />
        </ConfirmationDialog.Trigger>
        <ConfirmationDialog.Actions>
          <Button label="OK" onPress={() => setIsPresented(false)} />
          <Button label="Cancel" role="cancel" />
        </ConfirmationDialog.Actions>
        <ConfirmationDialog.Message>
          <Text>Only the message and actions are visible.</Text>
        </ConfirmationDialog.Message>
      </ConfirmationDialog>
    </Host>
  );
}
```

## API

```tsx
import { ConfirmationDialog } from '@expo/ui/swift-ui';
```

## Component

### `ConfirmationDialog`

Supported platforms: iOS, tvOS.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[ConfirmationDialogProps](#confirmationdialogprops)\>

`ConfirmationDialog` presents a confirmation dialog with a title, optional message, and action buttons.

> **See:** [https://developer.apple.com/documentation/swiftui/view/confirmationdialog(_:ispresented:titlevisibility:actions:message](https://developer.apple.com/documentation/swiftui/view/confirmationdialog\(_:ispresented:titlevisibility:actions:message):)

Props of the `ConfirmationDialog` component.

ConfirmationDialogProps

### `children`

Supported platforms: iOS, tvOS.

Type: `React.ReactNode`

The contents of the confirmation dialog. Should include `ConfirmationDialog.Trigger`, `ConfirmationDialog.Actions`, and optionally `ConfirmationDialog.Message`.

### `isPresented`

Supported platforms: iOS, tvOS.

Optional • Type: `boolean`

Whether the confirmation dialog is presented.

### `onIsPresentedChange`

Supported platforms: iOS, tvOS.

Optional • Type: `(isPresented: boolean) => void`

A callback that is called when the `isPresented` state changes.

### `title`

Supported platforms: iOS, tvOS.

Type: `string`

The title of the confirmation dialog.

### `titleVisibility`

Supported platforms: iOS, tvOS.

Optional • Literal type: `string` • Default: `'automatic'`

The visibility of the dialog title.

Acceptable values are: `'automatic'` | `'visible'` | `'hidden'`

#### Inherited Props

-   [CommonViewModifierProps](/versions/v56.0.0/sdk/ui/swift-ui/modifiers)