Group

Used to group and attach elements together

import { Group } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Group>
      <DecorativeBox h="20" w="40">
        1
      </DecorativeBox>
      <DecorativeBox h="20" w="40">
        2
      </DecorativeBox>
    </Group>
  )
}

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.

import { Button, Group } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Group>
      <Button variant="outline">Item 1</Button>
      <Button variant="outline">Item 2</Button>
    </Group>
  )
}

Attached

Use the attached prop to attach the children together.

Commit status90+

import { Badge, Button, Group, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <Group attached>
        <Button variant="outline">Item 1</Button>
        <Button variant="outline">Item 2</Button>
      </Group>

      <Group attached>
        <Badge variant="solid" colorPalette="purple">
          Commit status
        </Badge>
        <Badge variant="solid" colorPalette="green">
          90+
        </Badge>
      </Group>
    </Stack>
  )
}

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.

import { Button, Group } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Group grow>
      <Button variant="outline">First</Button>
      <Button variant="outline">Second</Button>
      <Button variant="outline">Third</Button>
    </Group>
  )
}

Props

Grid

SimpleGrid