---
title: AlertDialog | UI
description: A AlertDialog component is used to create clickable elements that perform an action when pressed.
pageTitle: AlertDialog
pageDescription: A AlertDialog component is used to create clickable elements that perform an action when pressed.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Overlay/AlertDialog" />

import { CloseIcon, Button, Center } from './AlertDialog';
import { Text as AlertDialogText, AlertDialog } from './AlertDialog';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  Text,
  InlineCode,
} from '@gluestack/design-system';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `AlertDialog` component to your project.

```jsx
npx install @gluestack-ui add alert-dialog
```

## Import

```jsx
// import the component from your component folder
import { AlertDialog } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
function App(){
  const [showAlertDialog, setShowAlertDialog] = React.useState(false);
  return (<Wrapper>
          <Center h={300}>
            <Button onPress={() => setShowAlertDialog(true)}>
              <Button.Text>Click me</Button.Text>
            </Button>
          </Center>
            <AlertDialog
              isOpen={showAlertDialog}
              onClose={() => {
              setShowAlertDialog(false);
               }}
            >
              <AlertDialog.Backdrop />
              <AlertDialog.Content>
                <AlertDialog.Header>
                  <Text variant="AlertDialogHeader">Return Policy</Text>
                  <AlertDialog.CloseButton>
                    <CloseIcon sx={{ w: 16, h: 16 }} />
                  </AlertDialog.CloseButton>
                </AlertDialog.Header>
                <AlertDialog.Body>
                  <Text fontSize="$sm">
                    You're almost there! This alert-dialog is the final checkpoint before you reach your destination. Confirm that you're ready to go, and we'll hit the road!
                  </Text>
                </AlertDialog.Body>
                <AlertDialog.Footer>
                  <Button
                    variant="outline"
                    action="secondary"
                    mr="$3"
                    onPress={() => {
                      setShowAlertDialog(false);
                    }}
                  >
                    <Button.Text>Cancel</Button.Text>
                  </Button>
                  <Button
                    action="primary"
                    onPress={() => {
                      setShowAlertDialog(false);
                    }}
                  >
                    <Button.Text>Confirm</Button.Text>
                  </Button>
                </AlertDialog.Footer>
              </AlertDialog.Content>
            </AlertDialog>
          </Wrapper>
        );
      }
`,
      scope: {
        Wrapper,
        AlertDialog,
        CloseIcon,
        Button,
        Center,
        Text: AlertDialogText,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The alert-dialog component consists of the following parts:

```jsx
export default () => (
  <AlertDialog>
    <AlertDialog.Backdrop />
    <AlertDialog.Content>
      <AlertDialog.Header>
        <AlertDialog.CloseButton></AlertDialog.CloseButton>
      </AlertDialog.Header>
      <AlertDialog.Body></AlertDialog.Body>
      <AlertDialog.Footer></AlertDialog.Footer>
    </AlertDialog.Content>
  </AlertDialog>
);
```

## API Reference

### AlertDialog

Contains all button related layout style props and actions.
It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component.

<AppProvider>
  <Table>
    <Table.THead>
      <Table.TR>
        <Table.TH>
          <Table.TText>Prop</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Type</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Default</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Description</Table.TText>
        </Table.TH>
      </Table.TR>
    </Table.THead>
    <Table.TBody>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isOpen</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the alert-dialog will open. Useful for controllable state behavior.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>onClose</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`() => any`}</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Callback invoked when the alert-dialog is closed.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>useRNAlertDialog</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, renders react-native native alert-dialog.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>defaultIsOpen</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Specifies the default open state of the AlertDialog.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>initialFocusRef</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`React.RefObject<any>`}</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`The ref of element to receive focus when the alert-dialog opens.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>finalFocusRef</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`React.RefObject<any>`}</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`The ref of element to receive focus when the alert-dialog closes.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>avoidKeyboard</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the AlertDialog will avoid the keyboard.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>closeOnOverlayClick</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the AlertDialog will close when the overlay is clicked.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isKeyboardDismissable</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the keyboard can dismiss the AlertDialog.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>animationPreset</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>slide &#124; fade</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>slide</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Specifies the animation preset for the AlertDialog.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>contentSize</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>any</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Specifies the content size for the AlertDialog.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>children</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>any</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`The content to display inside the AlertDialog.`}</Table.TText>
        </Table.TD>
      </Table.TR>
    </Table.TBody>
  </Table>
</AppProvider>

### AlertDialog.Backdrop

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### AlertDialog.CloseButton

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### AlertDialog.Header

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### AlertDialog.Body

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### AlertDialog.Footer

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

## Accessibility

Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog AlertDialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/#dialog_alert-dialog).

## Dependencies

- `@gluestack-ui/utils`
- `@react-native-aria/focus`
- `react-native-svg`
- `@gluestack-ui/hooks`
- `@gluestack-ui/icon`
- `@gluestack-ui/overlay`
- `@gluestack-ui/react-native-aria`
- `@gluestack-ui/transitions`

<br />
<br />

# Advanced

## Customizing the AlertDialog

We have a function called `createAlertDialog` which can be used to create a custom alert-dialog component. This function takes in a configuration object which contains the styled components that you want to use for the alert-dialog. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import {
  Root,
  Content,
  CloseButton,
  Header,
  Footer,
  Body,
  Backdrop,
} from '../components/core/alert-dialog/styled-components';

// import the createAlertDialog function
import { createAlertDialog } from '@gluestack-ui/alert-dialog';

// Understanding the API
const AlertDialog = createAlertDialog({
  Root,
  Content,
  CloseButton,
  Header,
  Footer,
  Body,
  Backdrop,
});

// Using the alert-dialog component
export default () => (
  <AlertDialog>
    <AlertDialog.Backdrop />
    <AlertDialog.Content>
      <AlertDialog.Header>
        <Heading>Confirm your request</Heading>
        <AlertDialog.CloseButton>
          <CloseIcon />
        </AlertDialog.CloseButton>
      </AlertDialog.Header>
      <AlertDialog.Body>
        <Text>AlertDialog Body</Text>
      </AlertDialog.Body>
      <AlertDialog.Footer>
        <Button>
          <Button.Text></Button.Text>
        </Button>
        <Button>
          <Button.Text></Button.Text>
        </Button>
      </AlertDialog.Footer>
    </AlertDialog.Content>
  </AlertDialog>
);
```

Default styling of all these components can be found in the `components/core/alert-dialog` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/components/AlertDialog/index.tsx) of the styled `AlertDialog` components.