wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Compiler

Intro
Install
Benchmarks

Core

Configuration
Themes
Props
styled
Variants
Animations
Stack & Text
Theme
useMedia
useTheme
FontLanguage
Extras

Tamagui

Stacks
Headings
Paragraph

Forms

Button
Text Inputs
Label
Progress
Select
Slider
Switch

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip

Content

Avatar
Card
Group
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Feather Icons

Guides

Design Systems
Developing
Next.js
Expo
Vite
create-tamagui-app

Community

Blog
GitHub
Twitter
Discord

Dialog

Show context with actions or information above content.

Features

  • Comes with styling, yet completely customizable and themable.

  • Accepts animations, themes, size props and more.

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

Anatomy

 
import { Dialog } from '@tamagui/dialog' // or from 'tamagui'



export default () => (

  <Dialog>

    <Dialog.Trigger />

    <Dialog.Portal>

      <Dialog.Overlay />

      <Dialog.Content>

        <Dialog.Title />

        <Dialog.Description />

        <Dialog.Close />

        {/* ... */}

      </Dialog.Content>

    </Dialog.Portal>

  </Dialog>

)

API

<Dialog />

Contains every component for the dialog. Beyond Tamagui Props, adds:

Props

  • children (required)

    React.ReactNode

    Must contain Dialog.Content

  • size

    SizeTokens

    Passes size down too all sub-components when set for padding, arrow, borderRadius

  • open

    boolean

  • defaultOpen

    boolean

  • onOpenChange

    (open: boolean) => void

  • modal

    boolean

    Default: 

    true

    Renders into root of app instead of inline

  • sheetBreakpoint

    MediaPropKeys | false

    Set this to a media breakpoint and Dialog will show as a Sheet, if given Dialog.Sheet

    • <Trigger />

    Just Tamagui Props.

    <Portal />

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

    Just Tamagui Props.

    <Sheet />

    When used alongside sheetBreakpoint, Dialog will render as a sheet when that breakpoint is active.

    See Sheet for more props.

    Must use Dialog.SheetContents inside the Dialog.Sheet.Frame to insert the contents given to Dialog.Content

    import { Dialog } from '@tamagui/dialog' // or from 'tamagui'

    

    export default () => (

      <Dialog sheetBreakpoint="sm">

        <Dialog.Trigger />

    

        <Dialog.Sheet>

          <Dialog.Sheet.Frame>

            <Dialog.SheetContents />

          </Dialog.Sheet.Frame>

          <Dialog.Sheet.Overlay />

        </Dialog.Sheet>

    

        <Dialog.Portal>

          <Dialog.Overlay />

          <Dialog.Content>

            <Dialog.Title />

            <Dialog.Description />

            <Dialog.Close />

            {/* ... */}

          </Dialog.Content>

        </Dialog.Portal>

      </Dialog>

    )

    Note that Dialog.Sheet currently doesn't preserve state of the contents when it transitions between Sheet and Portal. In the future, we can do this on the web using react-reparenting.

    Previous

    AlertDialog

    Next

    Popover

    Edit this page on GitHub.