Alert Dialog

<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 above other content.

Installation

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

npm install @tamagui/alert-dialog

Anatomy

import { AlertDialog } from 'tamagui' // or '@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>
)

API Reference

AlertDialog

Contains every component for the AlertDialog. Shares all Dialog Props, 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 Tamagui Props.

AlertDialog.Portal

Renders AlertDialog into appropriate container. Beyond Tamagui 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 Tamagui 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 Tamagui 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.

AlertDialog.Description

Required. Can wrap in VisuallyHidden to hide.

Defaults to Paragraph, see Paragraph.

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.

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