Group - Chakra Ui — ContextQMD

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.

Attached

Use the attached prop to attach the children together.

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

tsx

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