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.

Preview

See code

Use hooks for easier control Modal.

Preview

See code

Without Actions

Hide all action buttons.

Preview

See code

Disable Action

Disable one of the buttons.

Preview

See code

Customized

Custom width or className.

Preview

See code

Loading

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

Preview

See code

Overlong

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

Preview

See code

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`
...	native props	`HTMLAttributes`	`'autoFocus', 'name', 'className', ...`	-

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

Note

MADE & DESIGNED WITHBY BRUNO ANDRADE