Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

Dialog

Dialog is a component used to confirm or interrupt user actions.

Source@yamada-ui/modal

Props

DialogProps

allowPinchZoom

Description

Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.

Type

boolean

Default

false.

animation

Description

The animation of the tooltip.

Type

"bottom" | "left" | "right" | "scale" | "top" | "none"

Default

'scale'

as

Description

The HTML element to render.

Type

keyof IntrinsicElements

blockScrollOnMount

Description

If true, scrolling will be disabled on the body when the modal opens.

Type

boolean

Default

true

cancel

Description

The dialog cancel to use.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ButtonProps

closeOnEsc

Description

If true, the modal will close when the Esc key is pressed.

Type

boolean

Default

true

closeOnOverlay

Description

If true, the modal will close when the overlay is clicked.

Type

boolean

Default

true

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

containerProps

Description

Props for modal container element.

Type

HTMLUIProps

duration

Description

The animation duration.

Type

number | MotionLifecycleProps<number>

finalFocusRef

Description

ref of the element to return focus to when FocusLock unmounts.

Type

RefObject<FocusableElement>

header

Description

The dialog header to use.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

initialFocusRef

Description

ref of the element to receive focus initially.

Type

RefObject<FocusableElement>

isOpen

Deprecated

Description

If true, the open will be opened.

Deprecated

Use open instead.

Type

boolean

lockFocusAcrossFrames

Description

Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active. - If false: allows focus to move outside of iframe.

Type

boolean

Default

false

onCancel

Description

The callback invoked when cancel button clicked.

Type

(onClose: (() => void) | undefined) => void

onClose

Description

Callback invoked to close the modal.

Type

() => void

onCloseComplete

Description

Callback function to run side effects after the modal has closed.

Type

() => void

onEsc

Description

Callback fired when the escape key is pressed and focus is within modal.

Type

() => void

onOther

Description

The callback invoked when other button clicked.

Type

(onClose: (() => void) | undefined) => void

onOverlayClick

Description

Callback fired when the overlay is clicked.

Type

() => void

onSuccess

Description

The callback invoked when success button clicked.

Type

(onClose: (() => void) | undefined) => void

open

Description

If true, the open will be opened.

Type

boolean

other

Description

The dialog other to use.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ButtonProps

outside

Description

The CSS padding property.

Type

UIValue<number | "px" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-0.5" | "-1" | ... 99 more ... | "xs">

placement

Description

The placement of the modal.

Type

UIValue<| "bottom" | "left" | "right" | "top" | "center" | "bottom-left" | "bottom-right" | "top-left" | "top-right">

Default

'center'

portalProps

Description

Props to be forwarded to the portal component.

Type

Omit<PortalProps, "children">

restoreFocus

Description

If true, focus will be restored to the element that triggered the FocusLock once it unmounts.

Type

boolean

Default

false

scrollBehavior

Description

Where scroll behavior should originate. - inside: scroll only occurs within the ModalBody. - outside: the entire ModalContent will scroll within the viewport.

Type

"outside" | "inside"

Default

'inside'

size

Description

The size of the Dialog.

Type

"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"

Default

"md"

success

Description

The dialog success to use.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ButtonProps

variant

Description

The variant of the Dialog.

Type

string

withCloseButton

Description

If true, display the modal close button.

Type

boolean

Default

true

withOverlay

Description

If true, display the modal overlay.

Type

boolean

Default

true

DialogHeaderProps

DialogBodyProps

DialogFooterProps

DialogOverlayProps

as

Description

The HTML element to render.

Type

keyof IntrinsicElements

DialogCloseButtonProps

disableRipple

Description

If true, disable ripple effects when pressing a element.

Type

boolean

Default

false

fullRounded

Description

If true, the button is full rounded.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the button is disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isRounded

Deprecated

Description

If true, the button is full rounded.

Deprecated

Use fullRounded instead.

Type

boolean

Default

false

Edit this page on GitHub

PreviousModalNextDrawer