Modal

The Modal component can be used to show any type of content such as text, form elements, and notifications to your website visitors by creating an off-canvas box on top of the main content area of your website.

You can choose from multiple examples based on various styles, layouts, and elements inside the modal component and you can customize the behaviour, placement, and sizing using our custom React props and the utility classes from Tailwind CSS.

To get started with the modal component you first need to import it from Pol-ui:

import { Modal } from "pol-ui";

Use the <Modal> React component to show a dialog element to the user with a header, body, and footer where you can add any type of content such as text or form elements.

The visibility of the component can be set by passing a boolean value to the show prop on the <Modal> component and we recommend you to do this via the React state, both with a useState hook or a Redux store.

We also recommend the use of useBoolean from pol-ui to manage the state of the modal component visibility.

Default Loader

import { Modal, Button, useBoolean } from "pol-ui";
const ModalComponent = () => {
  const { value, setTrue, setFalse } = useBoolean(false);
 
  return (
    <>
      <div className="flex">
        <Button onClick={setTrue}>Open modal</Button>
      </div>
      <Modal
        deleteButton
        {...props}
        onClose={() => {
          setFalse();
        }}
        show={value}
      >
        <div className="flex flex-col gap-3">
          <h3 className="text-xl font-semibold">Terms of Service</h3>
          <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
            With less than a month to go before the European Union enacts new
            consumer privacy laws for its citizens, companies around the world
            are updating their terms of service agreements to comply. The
            European Union’s General Data Protection Regulation (G.D.P.R.) goes
            into effect on May 25 and is meant to ensure a common set of data
            rights in the European Union. It requires organizations to notify
            users as soon as possible of high-risk data breaches that could
            personally affect them.
          </p>
          <footer className="flex gap-2 pt-4 ">
            <Button
              onClick={() => {
                alert("custom action");
                setFalse();
              }}
            >
              I accept
            </Button>
            <Button color="error" onClick={setFalse}>
              Decline
            </Button>
          </footer>
        </div>
      </Modal>
    </>
  );
};
export default ModalComponent;

Props

Prop name	Type	Default	Description
onClose	() => void	-	Callback function to close the modal
position	keyof ModalPositions	'center'	Position of the modal
popup	boolean	-	If true, the modal will be a popup
root	HTMLElement	-	The root element to append the modal to
show	boolean	-	If true, the modal will be visible
size	MainSizes	'2xl'	Size of the modal
dismissible	boolean	true	If true, the modal will be dismissible
deleteButton	boolean	false	If true, the modal will have a delete button
lockScroll	boolean	true	If true, the modal will lock the scroll
theme	ModalTheme	-	Custom theme for the modal
initialFocus	number	-	Initial focus for the modal

Examples

Warning modal

import { Modal, Button, useBoolean } from "pol-ui";
const ModalComponent = () => {
  const { value, setTrue, setFalse } = useBoolean(false);
 
  return (
    <>
      <div className="flex">
        <Button onClick={setTrue}>Open modal</Button>
      </div>
      <Modal
        onClose={() => {
          setFalse();
        }}
        show={value}
      >
        <div className="text-center">
          <HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
          <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
            Are you sure you want to delete this product?
          </h3>
          <div className="flex justify-center gap-4">
            <Button
              color="error"
              onClick={() => {
                setFalse();
              }}
            >
              Yes, I&apos;m sure
            </Button>
            <Button
              color="secondary"
              onClick={() => {
                setFalse();
              }}
            >
              No, cancel
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
};
export default ModalComponent;

Modal with a form

import {
  Modal,
  Button,
  useBoolean,
  Input,
  Checkbox,
  PasswordInput,
} from "pol-ui";
const ModalComponent = () => {
  const { value, setTrue, setFalse } = useBoolean(false);
 
  return (
    <>
      <Button
        onClick={() => {
          setTrue();
        }}
      >
        Toggle modal
      </Button>
      <Modal
        onClose={() => {
          setFalse();
        }}
        show={value}
      >
        <div className="space-y-6 px-6 pb-4 sm:pb-6 lg:px-8 xl:pb-8">
          <h3 className="text-xl font-medium text-gray-900 dark:text-white">
            Create an account
          </h3>
          <Input
            label="Email"
            id="email"
            placeholder="name@company.com"
            required
          />
          <PasswordInput label="Password" id="password" required />
          <Checkbox id="remember" label="Remember me" />
          <Button>Log in to your account</Button>
        </div>
      </Modal>
    </>
  );
};
export default ModalComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface ModalTheme {
  base: string;
  show: string;
  closeButton: string;
  sizes: Sizes;
  positions: ModalPositions;
  content: string;
}

Default modal

Props

Examples

Warning modal

Modal with a form

Theme