Core
Tamagui
Extras
Guides
Community
Show an alert prompt in a dialog.
Comes with styling, completely customizable and themable.
Accepts animations, themes, size props and more.
Accessible with dev-time checks to ensure ARIA props.
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>)
Contains every component for the AlertDialog. Shares all Dialog Props, except modal which is on by default. Adds:
boolean
When true, on iOS it will render as a native AlertDialog.
Just Tamagui Props.
Renders AlertDialog into appropriate container. Beyond Tamagui Props, adds:
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
Main container for AlertDialog content, this is where you should apply animations.
Beyond Tamagui Props, adds:
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
Displays behind Content. Beyond Tamagui Props, adds:
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
Required. Can wrap in VisuallyHidden to hide.
Defaults to H2, see Headings.
Required. Can wrap in VisuallyHidden to hide.
Defaults to Paragraph, see Paragraph.
Closes the AlertDialog. Recommended to use with your own component and asChild
.
Just Tamagui Props.