Actions · Phoenix Paper

Button

Five classic Material variants, each available in four colors. pp_button always renders a native button element, and ripples on click or tap by default (see the Helpers page).

raised

flat

outlined

text

icon

Icons and loading

Disabled and paperize: false

Options

variant: raised | flat | outlined | text | icon (default: raised)
color: primary | secondary | tertiary | error (default: primary)
elevation: override the resting elevation, 0-24 (default: nil, variant decides)
shape: :none | :xs | :sm | :md | :lg | :xl | :full (default: :full, a pill)
ripple: boolean, the ripple effect on click/tap (default: true)
disabled: boolean (default: false)
loading: boolean, spinner replaces start_icon, disables the button (default: false)
:start_icon / :end_icon: slots: an icon before/after the label
type: button | submit | reset (default: button)
paperize: boolean (default: true)
class: merged on top via Tails

▸ Show code

<.pp_button color="primary">Save</.pp_button>
<.pp_button variant="outlined" color="secondary">Outlined</.pp_button>
<.pp_button variant="text">Text</.pp_button>
<.pp_button ripple={false}>No ripple</.pp_button>
<.pp_button paperize={false} class="border-4 border-dashed border-fuchsia-500 px-3 py-1 font-mono text-fuchsia-700">
  paperize: false
</.pp_button>

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

Button Group

Visually joins a row of buttons into one segmented control by rounding only the outer corners. No group-level color/variant that cascades to children like MUI's; set each button's own attrs.

Horizontal

Vertical

disable_elevation

Options

orientation: horizontal | vertical (default: horizontal)
shape: corner radius token for the group's outer corners (default: :md)
disable_elevation: boolean, zero out every child button's own elevation shadow (default: false)
paperize: boolean (default: true)
class: merged on top via Tails

▸ Show code

<.pp_button_group>
  <.pp_button variant="outlined">Day</.pp_button>
  <.pp_button variant="outlined">Week</.pp_button>
  <.pp_button variant="outlined">Month</.pp_button>
</.pp_button_group>

<.pp_button_group orientation="vertical">
  <.pp_button variant="outlined">Day</.pp_button>
  <.pp_button variant="outlined">Week</.pp_button>
  <.pp_button variant="outlined">Month</.pp_button>
</.pp_button_group>

<.pp_button_group disable_elevation>
  <.pp_button>Save</.pp_button>
  <.pp_button>Cancel</.pp_button>
</.pp_button_group>

Floating Action Button

A circular, elevated, icon-only button, or an extended pill with a label, typically anchored to a screen corner.

Sizes

Colors and extended

Options

color: primary | secondary | tertiary | error (default: secondary)
size: sm | md | lg (default: md)
extended: boolean, labeled pill instead of a fixed circle (default: false)
ripple: boolean (default: true)
disabled: boolean (default: false)
paperize: boolean (default: true)

▸ Show code

<.pp_fab :for={size <- ~w(sm md lg)} size={size}><.pp_icon name="hero-star" /></.pp_fab>
<.pp_fab :for={color <- ~w(primary secondary tertiary error)} color={color}>
  <.pp_icon name="hero-star" />
</.pp_fab>
<.pp_fab extended color="primary">
  <.pp_icon name="hero-star" /> Create
</.pp_fab>

Toggle Button

A button with a boolean pressed state, filled when pressed. Combine several inside a Button Group for a segmented toggle.

Standalone

Colors, pressed

Grouped

Options

pressed: boolean (default: false)
color: primary | secondary | tertiary | error (default: primary)
shape: corner radius token (default: :md)
ripple: boolean (default: true)
disabled: boolean (default: false)

▸ Show code

<.pp_toggle_button pressed={@bold_pressed} phx-click="toggle_bold">
  Bold
</.pp_toggle_button>

<.pp_toggle_button :for={color <- ~w(primary secondary tertiary error)} pressed color={color}>
  {color}
</.pp_toggle_button>