Anatomy

    <.dialog class="dialog">
  <:trigger>Open</:trigger>
  <:content>
    <p>Minimal content.</p>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    <.dialog class="dialog">
  <:trigger>Open Dialog</:trigger>
  <:title>Dialog Title</:title>
  <:description>
    Short description of what this dialog is for.
  </:description>
  <:content>
    <p>Body content.</p>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    <.dialog id="dialog-anatomy-actions" class="dialog">
  <:trigger>Open Dialog</:trigger>
  <:title>Confirm</:title>
  <:description>Choose an action to continue.</:description>
  <:content>
    <p>Are you sure you want to continue?</p>
    <div class="flex flex-wrap justify-end gap-space-sm mt-space-lg">
      <.action phx-click={Corex.Dialog.set_open("dialog-anatomy-actions", false)} class="button ui-size-sm">
        Cancel
      </.action>
      <.action phx-click={Corex.Dialog.set_open("dialog-anatomy-actions", false)} class="button ui-size-sm ui-solid">
        Continue
      </.action>
    </div>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>