Docs
Components
Dialog

`<Dialog />`

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), [])
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:

Open in Arcade

Properties

animate?: boolean

Whether the dialog should animate in on mount

cardRadius?: number | number[]

cardShadow?: number | number[]

footer?: React.ReactNode

header?: React.ReactNode

id: string

onClose?: () => void

scheme?: 'dark' | 'light'

width?: number | number[]

zOffset?: number

Made withby folks at