AlertDialog

Show an alert prompt in a dialog.

Features

  • Comes with styling, completely customizable and themable.

  • Accepts animations, themes, size props and more.

  • Accessible with dev-time checks to ensure ARIA props.

Anatomy

import { AlertDialog } from '@tamagui/alertDialog' // or from 'tamagui'
export default () => (
<AlertDialog>
<AlertDialog.Trigger />
<AlertDialog.Portal>
<AlertDialog.Overlay />
<AlertDialog.Content>
<AlertDialog.Title />
<AlertDialog.Description />
<AlertDialog.Close />
{/* ... */}
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog>
)

API

<AlertDialog />

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

Props

  • native

    boolean

    When true, on iOS it will render as a native AlertDialog.

  • <Trigger />

    Just Tamagui Props.

    <Portal />

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

    Props

  • forceMount

    boolean

    Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

  • <Content />

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

    Beyond Tamagui Props, adds:

    Props

  • forceMount

    boolean

    Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

  • <Overlay />

    Displays behind Content. Beyond Tamagui Props, adds:

    Props

  • forceMount

    boolean

    Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

  • <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.

    <Close />

    Closes the AlertDialog. Recommended to use with your own component and asChild.

    Just Tamagui Props.