wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Compiler

About
Install
Benchmarks

Core

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

Theme

Colors
Tokens

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

Lucide Icons

Guides

Design Systems
Developing
Next.js
Expo
Vite
create-tamagui

Community

Blog
GitHub
Twitter
Discord

Dialog

Show a modal with configurable layout and accessible actions.

Features

  • Comes with styling, yet completely customizable and themeable.

  • 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

    • <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, accepts the same props as YStack. Recommended to use with your own component and asChild.

    Props

  • displayWhenAdapted

    boolean

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

    • Just Tamagui Props.

    <Sheet />

    When used with Adapt, Dialog will render as a sheet when that breakpoint is active.

    See Sheet for more props.

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

    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>

    

        {/* optionally change to sheet when small screen */}

        <Dialog.Adapt when="sm">

          <Dialog.Sheet>

            <Dialog.Sheet.Frame>

              <Dialog.Adapt.Contents />

            </Dialog.Sheet.Frame>

            <Dialog.Sheet.Overlay />

          </Dialog.Sheet>

        </Dialog.Adapt>

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