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.