Modals

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.Modals
alias Phoenix.LiveView.JS
import GoodbonesWeb.CoreComponents, only: [show: 1]

<Buttons.button phx-click={show("#confirm-modal")}>Confirm</Buttons.button>

<Modals.modal id="confirm-modal">
  <Modals.modal_close_button modal_id="confirm-modal" />
  <h3 class="text-base font-semibold text-gray-900 dark:text-white">
    Confirm action
  </h3>
  <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
    Are you sure?
  </p>
  <Buttons.button
    class="mt-4 w-full"
    phx-click={JS.exec("data-cancel", to: "#confirm-modal")}
  >
    OK
  </Buttons.button>
</Modals.modal>

React (JSX)

import { useState } from "react"
import { Button, Modal } from "../ui/index.mjs"

function Confirm() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setOpen(true)}>Confirm</Button>
      <Modal
        open={open}
        onClose={setOpen}
        title="Confirm action"
        footer={<Button onClick={() => setOpen(false)}>OK</Button>}
      >
        Are you sure?
      </Modal>
    </>
  )
}