Modal

Display popup content that requires attention or provides additional information. If you just need to prompt for a text message, try component Toast.

The Modal contain an additional Hooks, see subsection useModal for details.

General

Use visible control whether Modal is displayed.

Use hooks for easier control Modal.

Without Actions

Hide all action buttons.

Disable Action

Disable one of the buttons.

Customized

Custom width or className.

Loading

You can use loading in Modal.Action with the property loading.

Overlong

Whether it is desktop or mobile, the content beyond the scope has been well handled.

APIs

Modal.Props

Attribute	Description	Type	Accepted values	Default
visible	open or close	`boolean`	-	`false`
onClose	open event	`() => void`	-	-
onContentClick	event from modal content	`(e: MouseEvent) => void`	-	-
wrapClassName	className of the modal dialog	`string`	-	-
keyboard	press Esc to close modal	`boolean`	-	`true`
disableBackdropClick	click background and don't close	`boolean`	-	`false`
role	use `alertdialog` for a message that needs an answer	`'dialog'` / `'alertdialog'`	-	`dialog`
aria-label	name of the dialog when there is no `Modal.Title`	`string`	-	-
...	native props	`HTMLAttributes`	`'autoFocus', 'name', 'className', ...`	-

The dialog is named by Modal.Title and described by Modal.Subtitle on its own. Without a title, pass aria-label or aria-labelledby.

Modal.Title.Props

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Modal.Subtitle.Props

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Modal.Content.Props

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Modal.Action.Props

Attribute	Description	Type	Accepted values	Default
passive	display passive mode	`boolean`	-	`false`
disabled	disable current action	`boolean`	-	`false`
onClick	click handler	(e: ModalActionEvent) => void	-	-
loading	show loading	`boolean`	-	`false`
...	native props	`ButtonHTMLAttributes`	`'id', 'className', ...`	-

useModal

type useModal = (initialVisible: boolean) => {
  visible: boolean
  setVisible: Dispatch<SetStateAction<boolean>>
  currentRef: MutableRefObject<boolean>
  bindings: {
    visible: boolean
    onClose: () => void
  }
}

ModalActionEvent

type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
  close: () => void
}

Edit this page on GitHub