PhoenixPaper.Button (PhoenixPaper v0.1.0)

Copy Markdown View Source

A Material Design button (pp_button/1).

Supports the five classic Material button variants: raised, flat, outlined, text and icon. Ripples on click/tap by default — see PhoenixPaper.Ripple, and AGENTS.md for the paperize contract shared by every PhoenixPaper component.

:start_icon/:end_icon slots place an icon before/after the label — the same idea as MUI's startIcon/endIcon props, just a slot instead of a prop holding an element, since that's how HEEx passes arbitrary markup (see PhoenixPaper.ListItem's :leading/:trailing for the same pattern elsewhere in this library):

<.pp_button variant="outlined">
  <:start_icon><.pp_icon name="hero-trash" /></:start_icon>
  Delete
</.pp_button>

loading shows a spinner in the :start_icon position (replacing it, if both are given) and disables the button — no loading_position/ overlay options like MUI's; this covers the common case without the complexity of the rest of that API.

Summary

Functions

pp_button(assigns)

Renders a button. See the module doc for variants, colors, and icons/loading.

Functions

pp_button(assigns)

Renders a button. See the module doc for variants, colors, and icons/loading.

Attributes

  • paperize (:boolean) - apply PhoenixPaper's Material styling. Defaults to true.
  • variant (:string) - Defaults to "raised". Must be one of "raised", "flat", "outlined", "text", or "icon".
  • color (:string) - Defaults to "primary". Must be one of "primary", "secondary", "tertiary", or "error".
  • elevation (:integer) - override the resting elevation (0-24). Defaults to nil.
  • shape (:atom) - corner radius token, see PhoenixPaper.Shape. Defaults to :full. Must be one of :none, :xs, :sm, :md, :lg, :xl, or :full.
  • ripple (:boolean) - the Material ripple effect on click/tap — off whenever paperize is false, see PhoenixPaper.Ripple. Defaults to true.
  • disabled (:boolean) - Defaults to false.
  • loading (:boolean) - shows a spinner in place of start_icon and disables the button. Defaults to false.
  • type (:string) - Defaults to "button". Must be one of "button", "submit", or "reset".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["form", "name", "value", "autofocus"].

Slots

  • start_icon - an icon before the label, replaced by the spinner when loading.
  • end_icon - an icon after the label.
  • inner_block (required)