@edux-design/modals

Centered modal primitives built on top of Radix Dialog and Edux design tokens.

Exports:

• Modal
• ModalTrigger
• ModalClose
• ModalPortal
• ModalOverlay
• ModalContent
• ModalHeader
• ModalBody
• ModalFooter
• ModalTitle
• ModalDescription

Usage

import {
  Modal,
  ModalTrigger,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  ModalClose,
  ModalTitle,
  ModalDescription,
} from "@edux-design/modals";
import { Button } from "@edux-design/buttons";

export function PublishModal() {
  return (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="primary">Open Modal</Button>
      </ModalTrigger>
      <ModalContent size="medium">
        <ModalHeader>
          <ModalTitle>Publish changes</ModalTitle>
          <ModalDescription>
            Review content before making it visible.
          </ModalDescription>
        </ModalHeader>
        <ModalBody>
          <p>Modal body content.</p>
        </ModalBody>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="secondary">Cancel</Button>
          </ModalClose>
          <Button variant="primary">Publish</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

ModalContent accepts size, backdropProps, backDropProps, className, and contentProps. Storybook examples live in src/demos/Modal.stories.jsx.