Modal

Displays a dialog with a custom content that requires attention or provides additional information.

import { Modal } from '@nextui-org/react';

Default

Use open prop to control whether Modal is displayed.

Large content

There are cases where you need a scroll because there is a lot of information within the Modal for this you can use the scroll property.

Full screen

If you need the Modal to be the total window size you can do it with the fullScreen property.

Without padding

If you need to remove the padding from the dialog to make a more personalized interface you can do it with the noPadding property.

Blur background

You can add a blur style to all the elements behind the Modal with the blur property, this functionality depends on the css property backdrop-filter.

Prevent close

With the preventClose property you can't close the dialog by clicking outside or pressing the esc key.

No Animated

You can disable the animation of the entire Modal with the property animated={false}.

APIs

Attribute	Type	Accepted values	Description	Default
open	`boolean`	`true/false`	Determine if the modal is visible or hidden	`false`
scroll	`boolean`	`true/false`	Makes the content a maximum high and gives the possibility to overflow the content add scroll	`false`
blur	`boolean`	`true/false`	Makes all elements blur when the modal opens	`false`
animated	`boolean`	`true/false`	Display the modal with opening and close animation	`true`
noPadding	`boolean`	`true/false`	Eliminates the padding of the base elements of the modal	`false`
closeButton	`boolean`	`true/false`	Determine if the modal close button is visible or hidden	`false`
fullScreen	`boolean`	`true/false`	Makes the modal the size of the window	`false`
autoMargin	`boolean`	`true/false`	Apply or not a margin to the base elements of the modal	-
preventClose	`boolean`	`true/false`	Modal cannot be closed by clicking outside or by pressing the esc key	`false`
width	`string` `number`	`%` `px` `rem` `em`	Determine the width of the modal	`400px`
onClose	`() => void`	-	Callback fired when the modal is closed	-
onOpen	`() => void`	-	Callback fired when the modal is open	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`section`
...	`HTMLAttributes`	`'id', 'className', ...`	Native props	-

Modal.Header Props

Attribute	Type	Accepted values	Description	Default
autoMargin	`boolean`	`true/false`	Apply or not a margin to the base elements of the modal	`true`
justify	`Justify`	Justify	CSS "justify-content" property	`center`
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`HTMLAttributes`	`'id', 'className', ...`	Native props	-

Modal.Body Props

Attribute	Type	Accepted values	Description	Default
autoMargin	`boolean`	`true/false`	Apply or not a margin to the base elements of the modal	`true`
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`HTMLAttributes`	`'id', 'className', ...`	Native props	-

Modal.Footer Props

Attribute	Type	Accepted values	Description	Default
autoMargin	`boolean`	`true/false`	Apply or not a margin to the base elements of the modal	`true`
justify	`Justify`	Justify	CSS "justify-content" property	`flex-end`
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`HTMLAttributes`	`'id', 'className', ...`	Native props	-

Justify

type Justify =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'space-between'
  | 'space-around'
  | 'space-evenly';

useModal

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

Progress Loading

Created by Junior Garcia

Deployed on

Documentation