Prism Docs

import { Button, Modal } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function ModalDefault(): React.JSX.Element {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button buttonType="secondary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal onOpenChange={setOpen} open={open}>
        <Modal.Header>
          <Modal.Header.Title>What&apos;s new in Lighthouse</Modal.Header.Title>
          <Modal.Header.Close />
        </Modal.Header>
        <Modal.Content>
          <p className="text-300--regular">
            Revenue reports can now be exported in Excel format with
            customizable column layouts.
          </p>
        </Modal.Content>
        <Modal.Footer>
          <Button buttonType="secondary" onClick={() => setOpen(false)}>
            Learn more
          </Button>
          <Button onClick={() => setOpen(false)}>Got it</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}