Group

Used to group and attach elements together

SourceReact version
1
2

Usage

import { Group } from "chakra-ui-solid";
<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} />;
}

Grow

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

Out of flow

Mark a child with data-group-skip to take it out of the row. It gets no seam of its own and does not count towards the positions of the children around it, so the two buttons below stay attached to each other.

<Group attached position="relative">
  <Button variant="outline">One</Button>
  <Button variant="outline">Two</Button>
  <Box data-group-skip position="absolute" top="-2" insetEnd="-2">
    <Badge>New</Badge>
  </Box>
</Group>

Props

GroupProps
PropDefaultType
align'center'
SystemStyleObject['alignItems']

Shorthand for `alignItems`.

justify'flex-start'
SystemStyleObject['justifyContent']

Shorthand for `justifyContent`.

wrap—
SystemStyleObject['flexWrap']

Shorthand for `flexWrap`.

Plus everything in GroupVariantProps, HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.