# 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 />](../button) components.&#x20;

</details>

{% hint style="info" %}
There is no need to install the [`<Button />`](../button)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" %}
