# ButtonGroup
Related buttons joined into one control, such as Previous, a page number and Next, or a split button. Only the outer corners are round, borders are shared, and buttons without a border get a separator. Each child keeps its own `variant`, `tone` and `size`, and the group has a name for screen readers.
```tsx
import { ButtonGroup } from "@/components/ouro/button-group/button-group";
```
## Example
```tsx
```
## Use instead when
- Use `ToggleGroup` instead when the buttons stay pressed and share one value, and a plain row (`
`) for buttons that are not one control.
## Props
Type: `ButtonGroupProps`.
| Prop | Type | Description |
| --- | --- | --- |
| `children` (required) | `ReactNode` | The buttons, in order: `Button`s or `Toggle`s, each with its own `variant`, `tone` and `size`. |
| `className` | `string` | Layout only: margins, width, grid placement (`mt-4`). Appearance classes warn in development. |
| `fullWidth` | `boolean` | Stretches the group to the width of its container, with the buttons sharing it equally. |
| `label` (required) | `string` | Names the group for screen readers ("Pagination", "Text alignment"). It is not shown. |
| `ref` | `Ref` | The group element (`role="group"`). |
## Don't use
These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.
- `isAttached`: Not a prop. A ButtonGroup always joins its buttons.
- `orientation`: Not a prop. A ButtonGroup is a row; stack buttons in a grid: `
`.
- `size`: Not a prop. Each Button keeps its own: `