> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/buttongroup/code.md).

# Code

### API

This component extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the table.

| Props      | Type                              | Required |
| ---------- | --------------------------------- | -------- |
| `children` | `ReactNode`                       | ✅        |
| `size`     | `'default' \| 'large' \| 'small'` | ❌        |

<details>

<summary>children</summary>

A group of [\<Button />](/sds/sds-3.0/sds-components/components/button.md) components.&#x20;

</details>

{% hint style="info" %}
There is no need to install the [`<Button />`](/sds/sds-3.0/sds-components/components/button.md)component, in case if you only installed the `<ButtonGroup />,`

you can use the `<ButtonGroup.Button />` component. Also, there is no need to import it as you can see in the example below.
{% endhint %}

<details>

<summary>size</summary>

Changes the size of all the buttons programatically.

</details>

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Demo</td><td><a href="https://codesandbox.io/s/button-group-ws8c8t">Code Sandbox</a></td><td></td></tr></tbody></table>

{% embed url="<https://codesandbox.io/p/sandbox/buttongroup-lj5mtl?file=/src/App.tsx:1,1>" fullWidth="true" %}