# `PetalComponents.ButtonGroup`
[🔗](https://github.com/petalframework/petal_components/blob/v3.2.0/lib/petal_components/button_group.ex#L1)

# `button_group`

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"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `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)

---

*Consult [api-reference.md](api-reference.md) for complete listing*