Modal

A modal is an overlay element which blocks interaction with elements outside it.

Usage#

Demo#

import { Button, Modal, ModalTrigger, ModalBody, ModalButtons, ModalFooter, ModalHeader, ModalHeading } from "pigment-ui";

function ModalDemo() {
  return (
    <ModalTrigger>
      <Button>Click me</Button>
      <Modal>
        <ModalHeader>
          <ModalHeading>Lorem ipsum dolor sit amet.</ModalHeading>
        </ModalHeader>

        <ModalBody>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
            dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
            perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
          </p>
        </ModalBody>

        <ModalFooter>
          <ModalButtons>
            <Button variant="light">Cancel</Button>
            <Button>Click me</Button>
          </ModalButtons>
        </ModalFooter>
      </Modal>
    </ModalTrigger>
  );
}

With separator#

In this case, you will need to use <Separator /> component between <ModalHeader />, <ModalBody /> and <ModalFooter /> components.

import { Button, Modal, ModalTrigger, ModalBody, ModalButtons, ModalFooter, ModalHeader, ModalHeading, Separator } from "pigment-ui";

function ModalWithSeparator() {
  return (
    <ModalTrigger>
      <Button>Click me</Button>
      <Modal>
        <ModalHeader>
          <ModalHeading>Lorem ipsum dolor sit amet.</ModalHeading>
        </ModalHeader>

        <Separator />

        <ModalBody>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
            dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
            perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
          </p>
        </ModalBody>

        <Separator />

        <ModalFooter>
          <ModalButtons>
            <Button variant="light">Cancel</Button>
            <Button>Click me</Button>
          </ModalButtons>
        </ModalFooter>
      </Modal>
    </ModalTrigger>
  );
}

Size#

import { Button, Modal, ModalTrigger, ModalBody, ModalButtons, ModalFooter, ModalHeader, ModalHeading, Separator } from "pigment-ui";

function ModalSize() {
  const renderModalContent = (
    <>
      <ModalHeader>
        <ModalHeading>Lorem ipsum dolor sit amet.</ModalHeading>
      </ModalHeader>

      <Separator />

      <ModalBody>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
          dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
          perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
        </p>
      </ModalBody>

      <Separator />

      <ModalFooter>
        <ModalButtons>
          <Button variant="light">Cancel</Button>
          <Button>Click me</Button>
        </ModalButtons>
      </ModalFooter>
    </>
  );

  return (
    <div className="flex flex-wrap gap-4">
      <ModalTrigger>
        <Button>Size sm</Button>
        <Modal size="sm">{renderModalContent}</Modal>
      </ModalTrigger>

      <ModalTrigger>
        <Button>Size md</Button>
        <Modal size="md">{renderModalContent}</Modal>
      </ModalTrigger>

      <ModalTrigger>
        <Button>Size lg</Button>
        <Modal size="lg">{renderModalContent}</Modal>
      </ModalTrigger>
    </div>
  );
}

Close#

import { Button, Modal, ModalTrigger, ModalBody, ModalButtons, ModalFooter, ModalHeader, ModalHeading, Separator } from "pigment-ui";

function ModalClose() {
  return (
    <ModalTrigger>
      <Button>Click me</Button>
      <Modal>
        {({ state }) => (
          <>
            <ModalHeader>
              <ModalHeading>Lorem ipsum dolor sit amet.</ModalHeading>
            </ModalHeader>
            <Separator />
            <ModalBody>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
                dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
                perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
              </p>
            </ModalBody>
            <Separator />
            <ModalFooter>
              <ModalButtons>
                <Button variant="soft" color="error" onPress={() => state.close()}>Close</Button>
                <Button>Click me</Button>
              </ModalButtons>
            </ModalFooter>
          </>
        )}
      </Modal>
    </ModalTrigger>
  );
}

Style slots#

type ModalStyleSlots = "base" | "backdrop" | "closeButton" | "header" | "body" | "footer" | "heading" | "buttons";

type ModalStyleProps = {
  classNames?: { [slot in keyof ModalStyleSlots]?: string };
  styles?: { [slot in keyof ModalStyleSlots]?: CSSProperties };
};

import { Button, Modal, ModalTrigger, ModalBody, ModalButtons, ModalFooter, ModalHeader, ModalHeading, Separator } from "pigment-ui";

function ModalStyleSlots() {
  return (
    <ModalTrigger>
      <Button>Click me</Button>
      <Modal classNames={{ base: "bg-info-100", backdrop: "bg-info-500/20", closeButton: "text-error-500 bg-error-500", heading: "underline", buttons: "justify-start" }}>
        <ModalHeader>
          <ModalHeading>Lorem ipsum dolor sit amet.</ModalHeading>
        </ModalHeader>

        <Separator />

        <ModalBody>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
            dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
            perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
          </p>
        </ModalBody>

        <Separator />

        <ModalFooter>
          <ModalButtons>
            <Button variant="light">Cancel</Button>
            <Button>Click me</Button>
          </ModalButtons>
        </ModalFooter>
      </Modal>
    </ModalTrigger>
  );
}

Edit this page

Menu NumberField