Modal

<div class="modal-root is-open" data-open="true">
  <button type="button" class="modal-backdrop" aria-label="Close dialog"></button>
  <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1">
    <div class="modal-head">
      <h2 class="modal-title" id="modal-title">Confirm apply</h2>
      <button type="button" class="modal-close" aria-label="Close">…</button>
    </div>
    <div class="modal-body">
      <div class="modal-confirm">
        <p class="modal-confirm__text">Submit this application?</p>
        <p class="modal-confirm__detail">You can review first.</p>
        <div class="actions">…</div>
      </div>
    </div>
  </div>
</div>

import {
  Modal, ModalDialog, ModalHead, ModalTitle, ModalClose, ModalBody, ModalConfirm, Button,
} from 'caustica-design/core'
import 'caustica-design/css'

<Modal open={open} onOpenChange={setOpen} backdropLabel="Close dialog">
  <ModalDialog labelledBy={titleId}>
    <ModalHead>
      <ModalTitle id={titleId}>Confirm apply</ModalTitle>
      <ModalClose label="Close" onClick={() => setOpen(false)} />
    </ModalHead>
    <ModalBody>
      <ModalConfirm text="Submit this application?" detail="You can review first.">
        <div className="actions">
          <Button variant="primary">Confirm</Button>
          <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
        </div>
      </ModalConfirm>
    </ModalBody>
  </ModalDialog>
</Modal>