AlertDialog

Show an alert prompt in a dialog.

import { AlertDialog } from 'tamagui' // or from '@tamagui/alert-dialog'

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

<AlertDialog />

Contains every component for the AlertDialog. Shares all Dialog Props, except modal which is on by default. Adds:

<Trigger />

Just Tamagui Props.

<Portal />

Renders AlertDialog into appropriate container. Beyond Tamagui Props, adds:

<Content />

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

Beyond Tamagui Props, adds:

<Overlay />

Displays behind Content. Beyond Tamagui Props, adds:

<Title />

Required. Can wrap in VisuallyHidden to hide.

Defaults to H2, see Headings.

<Description />

Required. Can wrap in VisuallyHidden to hide.

Defaults to Paragraph, see Paragraph.

<Cancel />

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