Group

Used to layout its children in an attached or normal group.

import { Group } from '@cerberus/react'

Usage

Used to group and attach elements together.

Attached

Use the layout prop to attach the group of children together.

Grow

Use the grow variant of the layout prop to make the children fill the space.

Orientation

Use the orientation prop to change the direction of the children.

Props

The Group component accepts any style properties along with the following props:

Prop	Type	Description
`layout`	`default, attached, grow`	The layout of the children along the cross axis.
`orientation`	`horizontal, vertical`	The direction of the children.
`asChild`	`boolean`	Use the provided child element as the default rendered element, combining their props and behavior.

On this page

Edit this page on Github

Cerberus Design System | Docs

import { DecorativeBox } from '@/app/components/decorative-box'
import { Group } from '@cerberus/react'

export function BasicDemo() {
  return (
    <Group>
      <DecorativeBox h="20" w="40">
        1
      </DecorativeBox>
      <DecorativeBox h="20" w="40">
        2
      </DecorativeBox>
    </Group>
  )
}

import { Button, Group } from '@cerberus/react'

export function GrowDemo() {
  return (
    <Group layout="grow" w="3/4">
      <Button usage="outlined">First</Button>
      <Button usage="outlined">Second</Button>
      <Button usage="outlined">Third</Button>
    </Group>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Group } from '@cerberus/react'

export function OrientationDemo() {
  return (
    <Group orientation="vertical">
      <DecorativeBox h="20" w="40">
        1
      </DecorativeBox>
      <DecorativeBox h="20" w="40">
        2
      </DecorativeBox>
    </Group>
  )
}

import { VStack } from 'styled-system/jsx'
import { Button, Group, Tag } from '@cerberus/react'

export function AttachedDemo() {
  return (
    <VStack gap="md" w="3/4">
      <Group layout="attached">
        <Button usage="outlined">Item 1</Button>
        <Button usage="outlined">Item 2</Button>
      </Group>

      <Group layout="attached">
        <Tag usage="filled">Commit status</Tag>
        <Tag usage="filled" palette="success">
          90+
        </Tag>
      </Group>
    </VStack>
  )
}