Modal

Display popup content that requires attention or provides additional information.

note:

Just want a text notification? Try

Toast component

.

Basic

Use open control whether Modal is displayed.

With useModal

Use hooks for easier control Modal.

Without Actions

Hide all action buttons.

Disable Action

Disable one of the buttons.

Customizable

Custom width or className.

Loading

Overlong

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

APIs

Modal.Props

AttributeDescriptionTypeAccepted valuesDefault
openopen or closeboolean-false
onOpenopen event() => void--
onCloseopen event() => void--
widthwidth of the modal dialogstring-26rem
wrapClassNameclassName of the modal dialogstring--
disableBackdropClickclick background and don't closeboolean-false
...native propsHTMLAttributes'autoFocus', 'name', 'className', ...-

Modal.Title.Props

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', 'className', ...-

Modal.Subtitle.Props

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', 'className', ...-

Modal.Content.Props

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes'id', 'className', ...-

Modal.Action.Props

AttributeDescriptionTypeAccepted valuesDefault
passivedisplay passive modeboolean-false
disableddisable current actionboolean-false
onClickclick handler(event: ModalActionEvent) => void--
loadingshow loadingboolean-false
...native propsButtonHTMLAttributes'id', 'className', ...-

useModal

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

ModalActionEvent

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