Modal

Attribute Type Documentation Default Value
Required id * :string
class :string
open :boolean false
show :boolean

Behaves like open attribute. This attribute exist to avoid compatibility issues with phoenix core components

closeable :boolean true
close_on_click_away :boolean false
rest :global
on_cancel %JS{} %Phoenix.LiveView.JS{ops: []}
modal_box :slot

the slot for compacting the modal body

Show slot attributes Hide slot attributes
class :string
content_class :string
inner_block :slot
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<.modal_action>
  <form method="dialog">
    <!-- if there is a button in form, it will close the modal -->
    <.button>Close</.button>
  </form>
</.modal_action>