1
2
import { Group } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const GroupBasic = () => {
return (
<Group>
<DecorativeBox h="20" w="40">
1
</DecorativeBox>
<DecorativeBox h="20" w="40">
2
</DecorativeBox>
</Group>
)
}
import { Group } from "@chakra-ui/react"<Group>
<div />
<div />
</Group>Here's an example of using the Group component to group buttons together.
import { Button, Group } from "@chakra-ui/react"
export const GroupWithButton = () => {
return (
<Group>
<Button variant="outline">Item 1</Button>
<Button variant="outline">Item 2</Button>
</Group>
)
}
Use the attached prop to attach the children together.
Commit status90+
import { Badge, Button, Group, Stack } from "@chakra-ui/react"
export const GroupWithAttached = () => {
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>
)
}
Use the grow prop to make the children grow to fill the available space.
import { Button, Group } from "@chakra-ui/react"
export const GroupWithGrow = () => {
return (
<Group grow>
<Button variant="outline">First</Button>
<Button variant="outline">Second</Button>
<Button variant="outline">Third</Button>
</Group>
)
}