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.