Feedback · Phoenix Paper

Alert

A colored, icon-led message for status feedback. severity is a distinct color axis from every other component's color: success/info/warning/error status colors, not primary/secondary/tertiary/error brand colors.

Try it

Changes saved.

A new update is available.

Check your input.

Error

Could not save your changes.

Options

severity: success | info | warning | error (default: info), picks the color and icon
variant: standard (tinted) | outlined | filled (default: standard)
:title / :action: optional slots: a bold line above the message, a trailing action
paperize: boolean (default: true)

▸ Show code

<.pp_alert severity="success">Changes saved.</.pp_alert>
<.pp_alert severity="info">A new update is available.</.pp_alert>
<.pp_alert severity="warning" variant="outlined">Check your input.</.pp_alert>
<.pp_alert severity="error" variant="filled">
  <:title>Error</:title>
  Could not save your changes.
  <:action><.pp_button variant="text">Retry</.pp_button></:action>
</.pp_alert>

Backdrop

A full-screen dimming overlay (most often behind a full-page loading spinner, or the piece Dialog composes for its own overlay). Stateless: open just toggles rendering it at all.

Try it

Options

open: boolean (default: true)
:inner_block: optional content centered over the dim (e.g. a spinner)
paperize: boolean (default: true)

▸ Show code

<.pp_button phx-click="toggle_backdrop">Show backdrop</.pp_button>

<.pp_backdrop open={@show_backdrop} phx-click="toggle_backdrop">
  <.pp_progress variant="circular" color="secondary" />
</.pp_backdrop>

Dialog

A modal, built the same way mix phx.new's generated core_components.ex builds its modal/1: always in the DOM, shown/hidden via Phoenix.LiveView.JS commands, not a server-tracked assign. PhoenixPaper.Dialog.show/1 and .hide/1 return JS commands to wire to whatever should open/close it.

Try it

Options

id: required: targeted by show/1 and hide/1
on_cancel: a JS command run (in addition to hiding) on backdrop click/Escape
:title / :actions: optional slots
paperize: boolean (default: true)

▸ Show code

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

<.pp_dialog id="confirm-delete">
  <: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 color="error" phx-click={PhoenixPaper.Dialog.hide("confirm-delete")}>
      Delete
    </.pp_button>
  </:actions>
</.pp_dialog>

Progress

linear or circular, combined into one component since they share the same value/color contract. value nil renders the indeterminate/animated form.

Linear

Determinate (72%)

Indeterminate

Circular

primary

secondary

tertiary

error

indeterminate

Options

variant: linear | circular (default: linear)
value: 0-100, nil for indeterminate (default: nil)
color: primary | secondary | tertiary | error (default: primary)
size: circular only, diameter in pixels (default: 40)
paperize: boolean (default: true)

▸ Show code

<.pp_progress value={72} />
<.pp_progress />
<.pp_progress variant="circular" value={72} />
<.pp_progress variant="circular" />

Skeleton

A placeholder loading shape (text, circular, rectangular, or rounded) with a pulsing (default) or shimmering animation while real content loads.

Try it

Options

variant: text | circular | rectangular | rounded (default: text)
width / height: an integer (px) or a CSS length string, e.g. "100%"
animation: pulse | wave | none (default: pulse)
paperize: boolean (default: true)

▸ Show code

<.pp_skeleton variant="circular" width={40} height={40} />
<.pp_skeleton />
<.pp_skeleton width="60%" />
<.pp_skeleton variant="rectangular" height={100} />
<.pp_skeleton variant="rounded" height={100} animation="wave" />

Snackbar

A brief toast: presentation-only. Auto-dismiss-after-a-delay isn't built in (that's one Process.send_after/3 in the caller's own LiveView, the same mechanism generated flash messages already use). No exit transition either, only entrance.

Try it

Changes saved

Copied to clipboard

Options

open: boolean (default: true)
anchor_origin: bottom-left (default) | bottom-center | bottom-right | top-left | top-center | top-right
transition: grow (default) | fade | slide | none, mount-in animation only
:action: optional slot (e.g. an "Undo" button)
elevation: resting elevation, 0-24 (default: 6)
paperize: boolean (default: true)

▸ Show code

<.pp_snackbar>
  Changes saved
  <:action>
    <.pp_button variant="text" class="!text-pp-surface" phx-click="dismiss">Undo</.pp_button>
  </:action>
</.pp_snackbar>

<.pp_snackbar anchor_origin="top-right" transition="slide">
  Copied to clipboard
</.pp_snackbar>