Group
Group is a component that groups and attaches multiple elements together.
<Group>
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Group>
Usage
import { Group } from "@yamada-ui/react"
import { Group } from "@/components/ui"
import { Group } from "@workspaces/ui"
<Group />
Change the Orientation
To change the orientation, set orientation to either "vertical" or "horizontal". The default is "horizontal".
<VStack alignItems="flex-start">
<Group>
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Group>
<Group orientation="vertical">
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Group>
</VStack>
Stretch Child Elements
To stretch child elements to full width, set grow to true.
<Group grow w="full">
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Group>
Attach Child Elements
To attach child elements together, set attached to true.
@yamada-ui/react10k+
<VStack alignItems="flex-start">
<Group attached>
<Input />
<IconButton
variant="surface"
aria-label="Add"
focusVisibleRing="inside"
icon={<PlusIcon fontSize="xl" />}
/>
</Group>
<Group attached>
<Tag colorScheme="gray" variant="solid">
@yamada-ui/react
</Tag>
<Tag colorScheme="lime" variant="solid">
10k+
</Tag>
</Group>
<Group attached orientation="vertical">
<Button variant="outline" focusVisibleRing="inside">
Button
</Button>
<Button variant="outline" focusVisibleRing="inside">
Button
</Button>
<Button variant="outline" focusVisibleRing="inside">
Button
</Button>
</Group>
</VStack>