Early access. Read the blog post

The Dialog component.

Basic example  

The Dialog component is typically rendered conditionally. It also needs an onClose property to function as expected:

import {useCallback, useState} from 'react'

const [open, setOpen] = useState(false)
const onClose = useCallback(() => setOpen(false), [])
const onOpen = useCallback(() => setOpen(true), [])

With that in place, it’s straight-forward to build a basic open/close flow using the Dialog component:


cardRadius?: number | number[]
cardShadow?: number | number[]
footer?: React.ReactNode
header?: React.ReactNode
id: string
onClose?: () => void
scheme?: 'dark' | 'light'
width?: number | number[]
zOffset?: number
Updated 1w ago
the platform for structured content