Homepage
IntroductionInstallationConfigurationThemesPropsBenchmarksReleases

Core

styledVariantsAnimationsStack & TextThemeuseMediauseTheme

Tamagui

StacksHeadingsParagraph

Forms

ButtonInput + TextareaLabelProgressSelectSliderSwitch

Panels

DialogPopoverTooltip

Content

AvatarCardGroupImageListItem

Visual

LinearGradientSeparatorSquare + Circle

Etc

AnchorHTML ElementsSpinnerUnspacedVisuallyHidden

Extras

DrawerFeather Icons

Guides

Design SystemsDevelopingNext.jsExpocreate-tamagui-app

Community

BlogGitHub
Twitter
Discord
Beta
Github

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.

Notice: Dialog is in beta for Web only, it renders on Native but some styling and interaction needs fixes before it's usable.

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

    Just Tamagui Props.

    Previous

    Switch

    Next

    Popover

    Edit this page on GitHub.