gui/apps/gui.hanzo.ai/data/docs/components/alert-dialog/2.0.0.mdx

---
title: Alert Dialog
description: Show an alert prompt in a dialog
name: alert-dialog
component: AlertDialog
package: alert-dialog
demoName: AlertDialog
---

<HeroContainer showAnimationDriverControl>
  <AlertDialogDemo />
</HeroContainer>

```tsx hero template=AlertDialog

```

<Highlights
  features={[
    `Comes with styling, completely customizable and themeable.`,
    `Accepts animations, themes, size props and more.`,
    `Accessible with dev-time checks to ensure ARIA props.`,
  ]}
/>

AlertDialog is a modal dialog that interrupts the user with important content and expects a response. It's built on Dialog with stricter accessibility requirements, and [automatically stacks](/ui/z-index) above other content.

## Installation

Alert Dialog is already installed in `hanzogui`, or you can install it independently:

```bash
npm install @hanzogui/alert-dialog
```

## Anatomy

```tsx
import { AlertDialog } from '@hanzo/gui' // or '@hanzogui/alert-dialog'

export default () => (
  <AlertDialog>
    <AlertDialog.Trigger />
    <AlertDialog.Portal>
      <AlertDialog.Overlay />
      <AlertDialog.Content>
        <AlertDialog.Title />
        <AlertDialog.Description />
        <AlertDialog.Cancel />
        {/* ... */}
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog>
)
```

## API Reference

### AlertDialog

Contains every component for the AlertDialog. Shares all [Dialog Props](/docs/components/dialog#api), except modal which is on by default. Adds:

<PropsTable
  data={[
    {
      name: 'native',
      type: 'boolean',
      required: false,
      description: `When true, on iOS it will render as a native AlertDialog.`,
    },
  ]}
/>

### AlertDialog.Trigger

Just [Gui Props](/docs/intro/props).

### AlertDialog.Portal

Renders AlertDialog into appropriate container. Beyond [Gui Props](/docs/intro/props), adds:

<PropsTable
  data={[
    {
      name: 'forceMount',
      type: 'boolean',
      required: false,
      description: `Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.`,
    },
  ]}
/>

### AlertDialog.Content

Main container for AlertDialog content, this is where you should apply animations.

Beyond [Gui Props](/docs/intro/props), adds:

<PropsTable
  data={[
    {
      name: 'forceMount',
      type: 'boolean',
      required: false,
      description: `Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.`,
    },
  ]}
/>

### AlertDialog.Overlay

Displays behind Content. Beyond [Gui Props](/docs/intro/props), adds:

<PropsTable
  data={[
    {
      name: 'forceMount',
      type: 'boolean',
      required: false,
      description: `Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.`,
    },
  ]}
/>

### AlertDialog.Title

Required. Can wrap in VisuallyHidden to hide.

Defaults to H2, see [Headings](/docs/components/headings).

### AlertDialog.Description

Required. Can wrap in VisuallyHidden to hide.

Defaults to Paragraph, see [Paragraph](/docs/components/text).

### AlertDialog.Cancel

Closes the AlertDialog, accepts all YStack props. Recommended to use with your own component and `asChild`.

<PropsTable
  data={[
    {
      name: 'displayWhenAdapted',
      type: 'boolean',
      description: `By default Cancel elements hide when Adapt is active. If set to true, they will show when adapted.`,
    },
  ]}
/>

### AlertDialog.Action

Confirms the AlertDialog action, accepts all YStack props. Recommended to use with your own component and `asChild`.

<PropsTable
  data={[
    {
      name: 'displayWhenAdapted',
      type: 'boolean',
      description: `By default Action elements hide when Adapt is active. If set to true, they will show when adapted.`,
    },
  ]}
/>

### AlertDialog.Destructive

A destructive action button for the AlertDialog. When using `native` mode on iOS, this renders with the native red destructive button style. Accepts all YStack props.

```tsx
<AlertDialog native>
  <AlertDialog.Trigger asChild>
    <Button>Delete Account</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Overlay />
    <AlertDialog.Content>
      <AlertDialog.Title>Delete Account?</AlertDialog.Title>
      <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
      <AlertDialog.Cancel asChild>
        <Button>Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Destructive asChild>
        <Button theme="red">Delete</Button>
      </AlertDialog.Destructive>
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog>
```

<PropsTable
  data={[
    {
      name: 'displayWhenAdapted',
      type: 'boolean',
      description: `By default Destructive elements hide when Adapt is active. If set to true, they will show when adapted.`,
    },
  ]}
/>

### PortalProvider

<PropsTable
  data={[
    {
      name: 'shouldAddRootHost',
      type: 'boolean',
      required: false,
      description: `Defines whether to add a default root host or not.`,
    },
  ]}
/>