Renders a button group. Group buttons are configured by defining multiple :button slots.

Note: Phoenix LiveView >= 0.20.17 is required to prevent arbitrary attributes like phx-* given to :button slots emitting development warnings.

Examples

Buttons

<.button_group aria_label="My actions" size="md">
  <:button phx-click="beep" phx-value-boop="bop">Action 1</:button>
  <:button phx-click="boop" phx-value-bop="beep">Action 2</:button>
  <:button label="Action 3" phx-click="bop" phx-value-beep="boop" disabled={@action_disabled?} />
</.button_group>

Links

<.button_group aria_label="My links" size="md">
  <:button kind="link" patch={~p"/path-one"}>Link 1</:button>
  <:button kind="link" patch={~p"/path-two"}>Link 2</:button>
  <:button label="Link 3" kind="link" navigate={~p"/other"} />
</.button_group>

Custom Styles

<.button_group
  aria_label="Custom styled buttons"
  button_bg_class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white"
  button_border_class="border border-blue-300 dark:border-blue-600"
>
  <:button>Custom Button 1</:button>
  <:button>Custom Button 2</:button>
</.button_group>

Attributes

• id (:string) - Defaults to nil.
• aria_label (:string) (required) - the ARIA label for the button group.
• size (:string) - Defaults to "md".
• container_class (:string) - class to apply to the group container. Defaults to "pc-button-group".
• font_weight_class (:string) - the font weight class to apply to all buttons - defaults to font-medium. Defaults to "font-medium".
• button_bg_class (:string) - class to customize the button background colors. Defaults to nil.
• button_border_class (:string) - class to customize the button border styles. Defaults to nil.

Slots

• button (required)