Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Group

Used to group and attach elements together

SourceStorybook
1
2

Usage

import { Group } from "@chakra-ui/react"
<Group>
  <div />
  <div />
</Group>

Examples

Button

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

Attached

Use the attached prop to attach the children together.

Commit status90+

Note: When composing custom components and attaching them to a Group, ensure you forward 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.

Props

PropDefaultType
as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Previous

Grid

Next

SimpleGrid