---
title: Group
description: Used to group and attach elements together
links:
  source: components/group
  storybook: components-group--basic
---

<ExampleTabs name="group-basic" />

## Usage

```jsx
import { Group } from "@chakra-ui/react"
```

```jsx
<Group>
  <div />
  <div />
</Group>
```

## Examples

### Button

Here's an example of using the `Group` component to group buttons together.

<ExampleTabs name="group-with-button" />

### Attached

Use the `attached` prop to attach the children together.

<ExampleTabs name="group-with-attached" />

**Note:** When composing custom components and attaching them to a `Group`,
ensure you forward props.

```tsx {10} /{...props}/
export const Demo = () => {
  return (
    <Group attached>
      <FocusButton />
      <IconButton variant="outline">Two</IconButton>
    </Group>
  )
}

function FocusButton(props: ButtonProps) {
  return (
    <IconButton variant="outline" {...props}>
      <LuFocus />
    </IconButton>
  )
}
```

### Grow

Use the `grow` prop to make the children grow to fill the available space.

<ExampleTabs name="group-with-grow" />

## Props

<PropTable component="Group" part="Group" />
