Feedback

MD3's dialog: 28dp corners on surface-container-high, a headline, supporting text and actions, with an optional hero icon. Always in the DOM and shown/hidden with the PhoenixPaper.Dialog.show/1 and hide/1 JS commands (like a generated core_components modal); focus is trapped, and Escape or a scrim click dismisses. variant="fullscreen" takes the whole screen; "responsive" is fullscreen on phones only.

<.pp_button phx-click={PhoenixPaper.Dialog.show("confirm-delete")}>Delete</.pp_button>

<.pp_dialog id="confirm-delete" icon="hero-trash">
  <:title>Delete this item?</:title>
  This can't be undone.
  <:actions>
    <.pp_button variant="text" phx-click={PhoenixPaper.Dialog.hide("confirm-delete")}>Cancel</.pp_button>
    <.pp_button variant="text" phx-click={JS.push("delete") |> PhoenixPaper.Dialog.hide("confirm-delete")}>
      Delete
    </.pp_button>
  </:actions>
</.pp_dialog>

<%!-- Full screen on every screen, or only on phones --%>
<.pp_dialog id="new-event" variant="responsive">...</.pp_dialog>

MD3 progress indicators, linear or circular (an SVG arc), determinate with a value or indeterminate without one. M3 Expressive adds a wavy track, a thick (8dp) variant, and the stop indicator at the track's end.

<.pp_progress value={72} label="Uploading" />
<.pp_progress label="Loading" />
<.pp_progress value={60} wavy />
<.pp_progress value={45} thickness={8} />

<.pp_progress variant="circular" value={65} color="tertiary" />
<.pp_progress variant="circular" />

M3 Expressive's loading indicator: a shape that morphs through MD3's shape library as it spins, for waits too short for a progress bar (pull to refresh, a card loading). contained sets it on a primary-container circle for indicators over content. Animated in CSS; Safari shows a rotating soft burst unless the JS hook is on.

<.pp_loading_indicator label="Loading messages" />
<.pp_loading_indicator contained />
<.pp_loading_indicator color="tertiary" size={36} />

A brief message on MD3's inverse-surface, always that color, with an optional :action and a close button (on_close). two_line fits a longer message. Dismissal is yours (a Process.send_after/3 clearing the open assign, like generated flash messages), or client-side with on_close + auto_hide_duration. It's fixed at the bottom of the viewport (centered on phones, bottom-start from sm) and enters with MD3's fade-and-expand; positioned={false} drops the fixed placement so you can place it yourself, as these demos do. For Phoenix flash messages, use Flash below.

<.pp_snackbar open={@message != nil}>
  {@message}
  <:action>
    <.pp_button variant="text" phx-click="undo">Undo</.pp_button>
  </:action>
</.pp_snackbar>

<%!-- on_close renders a trailing close button; pair it with auto_hide_duration
      for a hook-free client-side auto-dismiss --%>
<.pp_snackbar on_close={JS.push("dismiss")} auto_hide_duration={5000}>
  Link copied
</.pp_snackbar>

<%!-- two_line: a longer message above its action --%>
<.pp_snackbar two_line>
  Your draft was saved on this device. Sign in to sync it everywhere.
  <:action><.pp_button variant="text" phx-click="sign_in">Sign in</.pp_button></:action>
</.pp_snackbar>

Phoenix's @flash rendered as stacked snackbars: the Material counterpart of a generated core_components' flash_group. Drop pp_flash_group once in the root layout. Dismiss is wired to LiveView's built-in lv:clear-flash (no handler in your LiveView); auto_hide_duration is opt-in. Monochrome and text-only by spec: every kind looks the same, an inverse-surface snackbar.

This whole page renders a pp_flash_group bound to @flash instead of the default flash_group. The buttons above call put_flash/3; a real chip slides in at the top-right, auto-hides after 6s, or dismiss it with the ✕ (LiveView's built-in lv:clear-flash, no handler). It also sets connection_notices: stop the server and a "We can't find the internet" chip appears until the socket reconnects.

<%!-- Drop pp_flash_group once, where a generated <.flash_group> goes.
      auto_hide_duration is opt-in; dismissal needs no handler (lv:clear-flash).
      connection_notices adds the generated flash_group's connection-lost chips. --%>
<.pp_flash_group
  flash={@flash}
  auto_hide_duration={6000}
  connection_notices
  client_error_title={gettext("We can't find the internet")}
/>

# In the LiveView: an ordinary put_flash/3 shows a chip
def handle_event("flash_info", _params, socket),
  do: {:noreply, put_flash(socket, :info, "Workbook saved.")}

def handle_event("flash_error", _params, socket),
  do: {:noreply, put_flash(socket, :error, "Could not reach the guest agent.")}