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

---
title: AlertDialog
description: Show an alert prompt in a dialog
name: alertDialog
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.`,
  ]}
/>

## Installation

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

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

In order to use this component independently of `hanzogui`, you'll first need to install the `@hanzogui/portal` package:

```bash
npm install @hanzogui/portal
```

Then add `PortalProvider` to the root of your app:

```tsx fileName="App.tsx"
import { PortalProvider } from '@hanzogui/portal'
import YourApp from './components/YourApp'

function App() {
  return (
    <PortalProvider shouldAddRootHost>
      <YourApp />
    </PortalProvider>
  )
}

export default App
```

## 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.`,
    },
  ]}
/>

### PortalProvider

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

## Examples

### Inside native modals

If you're using native modals (maybe from react-navigation), you'll notice the Dialogs won't show up inside the modal. To get around this, you should wrap your screen inside `PortalProvider`, like so:

```tsx
import { PortalProvider } from '@hanzo/gui'

// this component used in react-navigation/expo-router with `presentation: "modal"`
export function Page() {
  return (
    <PortalProvider>{/* rest of your page, including the Dialog... */}</PortalProvider>
  )
}
```