GitHub

Components

Dialog

import { Dialog } from "@eggspot/ui"

Dialog

<div className="mb-4 flex items-center space-x-4">
  <Button intent={Button.intents.primary} onClick={() => setIsOpen(true)}>
    Open Dialog
  </Button>
</div>
<Dialog isOpen={isOpen} onEsc={() => setIsOpen(false)}>
  <Dialog.Title>Dialog title</Dialog.Title>
  <Dialog.Body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ad
      voluptate nam voluptatem impedit nobis omnis incidunt earum nemo
      odio. Temporibus sequi nobis soluta rerum, saepe architecto maxime
      delectus suscipit.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ad
      voluptate nam voluptatem impedit nobis omnis incidunt earum nemo
      odio. Temporibus sequi nobis soluta rerum, saepe architecto maxime
      delectus suscipit.
    </p>
  </Dialog.Body>
  <Dialog.Footer>
    <div className="ds-flex ds-space-x-8 ds-justify-end">
      <Button minimal onClick={() => setIsOpen(false)}>
        Cancel
      </Button>
      <Button intent={Button.intents.primary}>Submit</Button>
    </div>
  </Dialog.Footer>
</Dialog>

Props

AttributeTypeDescriptionDefault
isOpenboolean-false
onEsc() => void--
isCloseButtonShownboolean-true
isFullScreenMobileboolean-false
childrenReact.ReactNode--
Previous
Checkbox