PhiaUi.Components.ButtonGroup (phia_ui v0.1.17)

Copy Markdown View Source

Groups multiple buttons into a unified bar with shared borders.

Renders a wrapper <div> that uses Tailwind CSS child-selectors ([&>*]) to unify adjacent buttons visually: borders are shared without duplication, and rounded corners are applied only to the outermost edges of the group.

Works with any PhiaUi.Components.Button variant as well as plain <button> elements.

Orientations

OrientationLayoutNegative margin trick
"horizontal"inline-flex-ml-px collapses adjacent borders
"vertical"flex-col-mt-px collapses adjacent borders

How border collapsing works

Without the group, each button has a full border (4 sides). When placed side-by-side, adjacent borders double up to 2px visually. The group solves this with CSS child selectors:

  • [&>*:not(:first-child)]:-ml-px — shifts all buttons except the first 1px to the left, collapsing the shared border to a single pixel.
  • [&>*:first-child]:rounded-r-none — removes the right radius of the first button so it connects flush with its neighbour.
  • [&>*:last-child]:rounded-l-none — removes the left radius of the last.
  • [&>*:not(:first-child):not(:last-child)]:rounded-none — removes all radius from middle buttons.

Examples

Toolbar with text actions

<.button_group>
  <.button variant={:outline}>
    <.icon name="bold" size={:sm} />
  </.button>
  <.button variant={:outline}>
    <.icon name="italic" size={:sm} />
  </.button>
  <.button variant={:outline}>
    <.icon name="underline" size={:sm} />
  </.button>
</.button_group>

Clipboard actions (cut / copy / paste)

<.button_group>
  <.button>Cut</.button>
  <.button>Copy</.button>
  <.button>Paste</.button>
</.button_group>

View toggle (vertical)

<.button_group orientation="vertical">
  <.button variant={:outline}>List view</.button>
  <.button variant={:outline}>Grid view</.button>
  <.button variant={:outline}>Board view</.button>
</.button_group>

Full-width two-column split

<.button_group class="w-full">
  <.button variant={:outline} class="flex-1">Cancel</.button>
  <.button class="flex-1">Confirm</.button>
</.button_group>

Binary toggle (e.g. show/hide password)

<.button_group>
  <.button variant={if @show_raw, do: :default, else: :outline} phx-click="toggle_view" phx-value-view="raw">
    Raw
  </.button>
  <.button variant={if @show_raw, do: :outline, else: :default} phx-click="toggle_view" phx-value-view="preview">
    Preview
  </.button>
</.button_group>

Summary

Functions

button_group(assigns)

Renders a button group container that unifies multiple buttons visually.

Functions

button_group(assigns)

Renders a button group container that unifies multiple buttons visually.

Child buttons share borders without duplication. Border-radius is applied only on the outermost corners, giving the group a single unified pill-strip appearance. All Button variants and sizes remain fully functional inside the group.

The CSS [&>*] selector targets direct children only, so nested content inside each button is unaffected.

Attributes

  • orientation (:string) - Group layout direction: "horizontal" (default, side-by-side) or "vertical" (stacked). Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • class (:string) - Additional CSS classes merged via cn/1. Use w-full to stretch the group to full width. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <div> element.

Slots