---
title: AlertDialog
description: >-
  A composable component for important confirmations and alerts with
  customizable actions.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/alertdialog'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/alertdialog.md'
---

# AlertDialog

A composable component for important confirmations and alerts with customizable actions.

#### Props

* **children**

  **React.ReactNode**

  **required**

  The trigger element that opens the alert dialog

* **description**

  **string**

  **required**

  The description text shown in the alert dialog body

* **onConfirmationAction**

  **() => void**

  **required**

  Callback fired when the confirmation button is clicked

* **onOpenChange**

  **(open: boolean) => void**

  **required**

  Callback fired when the alert dialog open state changes

* **title**

  **string**

  **required**

  The title text shown in the alert dialog header

* **cancelButtonText**

  **string**

  The text shown in the cancel button

* **confirmationButtonText**

  **string**

  The text shown in the confirmation button

* **open**

  **boolean**

  Whether the alert dialog is open

Examples

## Preview

![alertdialog](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/AlertDialog-DQhTgumo.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button,
  } from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const handleConfirm = () => {
      console.log('Confirmed')
    }

    return (
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">Show Dialog</Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirm}>
              Continue
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    )
  }
  ```

***