GitHub
Copy-pasteStyled

Alert Dialog

Show an alert prompt in a dialog

AlertDialog asks users to confirm an action in a focused, accessible modal.

Features

  • Customizable, themeable default styling

  • Animations, themes, and size props

  • Accessibility checks for ARIA props during development

AlertDialog is 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:

yarn add @tamagui/alert-dialog

Anatomy

// copy-paste: these skins import from files you own. copy each registry item

// below into your app, then adjust the relative import paths to fit.

//   components/tamagui/AlertDialog.tsx (registry item "alertdialog")

//   components/tamagui/Dialog.tsx (registry item "dialog", via "alertdialog")

// npm dependencies: @tamagui/alert-dialog @tamagui/core @tamagui/dialog

import { AlertDialog } from "../components/tamagui/AlertDialog"; // 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:

Props

  • native

    boolean

    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:

    Props

  • forceMount

    boolean

    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:

    Props

  • forceMount

    boolean

    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:

    Props

  • forceMount

    boolean

    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 View props. Recommended to use with your own component and asChild.

    Props

  • displayWhenAdapted

    boolean

    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 View props. Recommended to use with your own component and asChild.

    Props

  • displayWhenAdapted

    boolean

    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 View 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>

    Props

  • displayWhenAdapted

    boolean

    By default Destructive elements hide when Adapt is active. If set to true, they will show when adapted.

    • PortalProvider

    Props

  • shouldAddRootHost

    boolean

    Defines whether to add a default root host or not.

    • Source

    v2-look AlertDialog: scrim background on the Overlay and background/border/padding/radius/shadow on the Content, over the unstyled @tamagui/ui AlertDialog behavior. This is the exact source the registry ships — copy it into your app and the examples above import from your copy.

    components/tamagui/AlertDialog.tsx
    import { AlertDialog as UiAlertDialog } from '@tamagui/alert-dialog'
import {
  createRefComponent,
  styled,
  type TamaguiElement,
  withStaticProperties,
} from '@tamagui/core'
import type * as React from 'react'
import { dialogContentStyles, dialogOverlayStyles } from './Dialog'

export const AlertDialogOverlay = styled(UiAlertDialog.Overlay, {
  displayName: 'AlertDialogOverlay',
  ...dialogOverlayStyles,
})

export const AlertDialogContent = styled(UiAlertDialog.Content, {
  displayName: 'AlertDialogContent',
  ...dialogContentStyles,
})

const AlertDialogRoot = createRefComponent<
  TamaguiElement,
  React.ComponentProps<typeof UiAlertDialog>
>(function AlertDialog(props, _ref) {
  return <UiAlertDialog {...props} />
})

export const AlertDialog = withStaticProperties(AlertDialogRoot, {
  Trigger: UiAlertDialog.Trigger,
  Portal: UiAlertDialog.Portal,
  Title: UiAlertDialog.Title,
  Description: UiAlertDialog.Description,
  Action: UiAlertDialog.Action,
  Cancel: UiAlertDialog.Cancel,
  Destructive: UiAlertDialog.Destructive,
  Overlay: AlertDialogOverlay,
  Content: AlertDialogContent,
})

    Also copy

    components/tamagui/Dialog.tsx (registry item "dialog", via "alertdialog")

    Dependencies

    yarn add @tamagui/alert-dialog @tamagui/core @tamagui/dialog

    Expects theme tokens: background, border-color. Native: requires a Portal provider at the app root for the alert dialog to mount above content

    Need raw behavior without any skin? tamagui/unstyled re-exports the @tamagui/ui primitives (advanced).

    Previous

    Accordion

    Next

    Dialog

    Edit this page on GitHub.