PhoenixPaper.ButtonGroup (PhoenixPaper v0.1.0)

Copy Markdown View Source

A Material Design button group (pp_button_group/1) — visually joins a row of PhoenixPaper.Buttons (or PhoenixPaper.ToggleButtons) into one segmented control by rounding only the group's outer corners and collapsing the shared borders.

Give each inner button variant="outlined" for the classic segmented look — the group overrides each child's own corner rounding regardless of its shape attr, so you don't need to set shape={:none} yourself.

orientation="vertical" stacks buttons top-to-bottom instead of side by side, collapsing the shared borders the same way (top/bottom instead of left/right).

disable_elevation zeroes out every child button's own elevation shadow (the same idea as MUI's disableElevation) — set it once on the group instead of elevation={0} on every button.

Unlike MUI, there's no group-level variant/color/size that cascades to children — MUI does that through React context, which HEEx has no equivalent for. render_slot/1 just re-renders whatever HEEx markup the caller wrote for inner_block; there's no hook for a parent component to reach into a child's own assigns and change them. Set those attrs on each <.pp_button> yourself.

There's also no built-in "split button" (a button plus a small dropdown-toggle button opening a menu) — that needs a menu/popover component this library doesn't have yet, not just a ButtonGroup option.

Summary

Functions

Renders a button group. See the module doc.

Functions

pp_button_group(assigns)

Renders a button group. See the module doc.

Attributes

  • paperize (:boolean) - Defaults to true.
  • orientation (:string) - stack buttons side by side or top-to-bottom. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • shape (:atom) - corner radius token, see PhoenixPaper.Shape. Defaults to :md. Must be one of :none, :xs, :sm, :md, :lg, :xl, or :full.
  • disable_elevation (:boolean) - zero out every child button's own elevation shadow. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["role"].

Slots

  • inner_block (required)