Modal

A modal overlays the page to focus user attention on a single task, decision, or piece of information. It blocks interaction with the rest of the page until dismissed.

Installation

npx jsx-daisyui add modal

Default

modal-default

With actions

modal-with-actions

Responsive

modal-responsive

API Reference

Modal

Prop	Type	Default	Description
`placement`	`'top' \| 'middle' \| 'bottom' \| 'start' \| 'end'`	`'middle'`	The placement of the modal on the screen.
`responsive`	`boolean`	-	If true, positions the modal at the bottom on mobile screens and in the middle on larger screens.
`closeOnBackdrop`	`boolean`	`true`	If true, clicking outside the modal will close it.

Modal.Box

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content rendered inside the modal box.

Modal.Header

Prop	Type	Default	Description
`title`	`string`	-	The title of the modal.
`description`	`string`	-	An optional description rendered below the title.

Modal.Body

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The main content of the modal.

Modal.Actions

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Action buttons rendered at the bottom of the modal, typically confirm and cancel controls.

Modal.Close

Prop	Type	Default	Description
`children`	`React.ReactNode`	`'✕'`	The content of the close button. Defaults to a close symbol.
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`	-	Additional click handler called when the close button is clicked.

useModal

Prop	Type	Default	Description
`ref`	`React.RefObject<HTMLDialogElement>`	-	Ref to attach to the Modal element.
`isOpen`	`boolean`	-	The current open state of the modal.
`open`	`() => void`	-	Opens the modal.
`close`	`() => void`	-	Closes the modal.
`toggle`	`() => void`	-	Toggles the modal between open and closed.

Modal

A modal overlays the page to focus user attention on a single task, decision, or piece of information. It blocks interaction with the rest of the page until dismissed.

Installation

npx jsx-daisyui add modal

Default

modal-default

With actions

modal-with-actions

Responsive

modal-responsive

API Reference

Modal

Prop	Type	Default	Description
`placement`	`'top' \| 'middle' \| 'bottom' \| 'start' \| 'end'`	`'middle'`	The placement of the modal on the screen.
`responsive`	`boolean`	-	If true, positions the modal at the bottom on mobile screens and in the middle on larger screens.
`closeOnBackdrop`	`boolean`	`true`	If true, clicking outside the modal will close it.

Modal.Box

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content rendered inside the modal box.

Modal.Header

Prop	Type	Default	Description
`title`	`string`	-	The title of the modal.
`description`	`string`	-	An optional description rendered below the title.

Modal.Body

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The main content of the modal.

Modal.Actions

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Action buttons rendered at the bottom of the modal, typically confirm and cancel controls.

Modal.Close

Prop	Type	Default	Description
`children`	`React.ReactNode`	`'✕'`	The content of the close button. Defaults to a close symbol.
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`	-	Additional click handler called when the close button is clicked.

useModal

Prop	Type	Default	Description
`ref`	`React.RefObject<HTMLDialogElement>`	-	Ref to attach to the Modal element.
`isOpen`	`boolean`	-	The current open state of the modal.
`open`	`() => void`	-	Opens the modal.
`close`	`() => void`	-	Closes the modal.
`toggle`	`() => void`	-	Toggles the modal between open and closed.