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.