Geist UI

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.

Basic

Use visible 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`

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
}

Contributors