Fuses its children into one segmented control: shared border, collapsed inner radii, a single outer radius. Put real petal components inside - <.button> with any color/variant/size, <.input>, a text segment - and the group does the joining.

Examples

Buttons (outline buttons carry their own dividers)

<.button_group aria_label="Change view">
  <.button color="gray" variant="outline">Day</.button>
  <.button color="gray" variant="outline">Week</.button>
  <.button color="gray" variant="outline">Month</.button>
</.button_group>

Split button (solid buttons need the separator)

<.button_group aria_label="Merge options">
  <.button>Merge pull request</.button>
  <.button_group_separator />
  <.button aria-label="More merge options">
    <.icon name="hero-chevron-down" class="w-4 h-4" />
  </.button>
</.button_group>

Mixed rail - text prefix, input and button

<.button_group aria_label="Site address" class="w-full max-w-sm">
  <.button_group_text>https://</.button_group_text>
  <.input type="text" name="domain" value="" placeholder="example.com" />
  <.button color="gray" variant="outline">Visit</.button>
</.button_group>

Nest groups to split one rail into gapped clusters:

<.button_group aria_label="Editor toolbar">
  <.button_group aria_label="History">...</.button_group>
  <.button_group aria_label="Formatting">...</.button_group>
</.button_group>

Legacy slot API

The :button slot API from earlier releases still renders (it styles its own plain buttons). New code should compose <.button> children instead.

<.button_group aria_label="My actions" size="md">
  <:button phx-click="beep">Action 1</:button>
  <:button label="Action 2" phx-click="boop" />
</.button_group>

Attributes

• id (:string) - Defaults to nil.
• aria_label (:string) (required) - the ARIA label for the button group.
• orientation (:string) - stack direction - vertical fuses top-to-bottom. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
• class (:any) - CSS classes for the group container. Defaults to nil.
• size (:string) - legacy slot API only - composed children carry their own size. Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
• container_class (:string) - legacy slot API only - class to apply to the group container. Defaults to "pc-button-group".
• font_weight_class (:string) - legacy slot API only - the font weight class to apply to all buttons. Defaults to "font-medium".
• button_bg_class (:string) - legacy slot API only - class to customize the button background colors. Defaults to nil.
• button_border_class (:string) - legacy slot API only - class to customize the button border styles. Defaults to nil.

Slots

• button - legacy API - self-styled buttons or links.
• inner_block - petal components to fuse - buttons, inputs, separators, text segments.

A hairline divider between fused children. Solid buttons need it (their borders are transparent); outline buttons and inputs don't - they carry their own borders. The default matches the border colour; between primary solids it tints from --pc-button-solid-fg instead, so it stays visible on the solid in both modes.

Attributes

• class (:any) - CSS class. Defaults to nil.

A non-interactive segment on the rail - a prefix like https://, a unit, a keyboard hint. Styled as a muted well that fuses like any other child.

Attributes

• class (:any) - CSS class. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)