Group

Join buttons, tabs or avatars into a connected horizontal or vertical group.

Group is a client component ("use client") that renders a styled-components Box as a centred flex row, with child styling rules selected by type and vertical. Use it to join buttons into a segmented control, stack avatars, or align tabs.

GridListBoard

Import#

typescript

import { Group } from "@reactberry/system/blocks";

Usage#

typescript

import { Group } from "@reactberry/system/blocks";
import { Button } from "@reactberry/system/elements";

export default function ViewToggle() {
  return (
    <Group type="buttons">
      <Button className="button" variant="primary" $size="small">
        Grid
      </Button>
      <Button className="button" $size="small">
        List
      </Button>
      <Button className="button" $size="small">
        Board
      </Button>
    </Group>
  );
}

Examples#

Avatar stack#

type="avatars" overlaps each div child and scales the hovered one up.

Vertical buttons#

Add vertical to stack the items in a column; the first item keeps its top corners rounded and the last its bottom corners.

ProfileSecurityBilling

API#

Group#

Prop	Type	Default	Description
`type`	`"buttons""avatars""tabs"`	—	Selects the child styling rules. Without it, `Group` is a plain flex row.
`vertical`	`boolean`	—	Switches to a flex column aligned to the start, with vertical variants of the `type` rules.
`children`	`ReactNode`	—	Grouped items.
`className`	`string`	—	Class name for the root element.

All other BoxProps are spread onto the root after display="flex" and alignItems="center". type and vertical are not forwarded to the DOM.

Accessibility#

Group adds no ARIA role. For a toolbar or set of related buttons, set role (for example role="group" with an aria-label) yourself.

Notes#

buttons (horizontal): the first and last children get 8px outer corner radii. Square inner corners, the -1px overlap and centred alignment apply only to direct children with the class button (and the first child of a .dropdown child). The Button element does not add this class itself, so pass className="button". Hovered children are raised with z-index: 2.
buttons (vertical): children are centred, the first gets top corners and the last gets bottom corners rounded.
avatars (horizontal): uses flex-direction: row-reverse, so children render in reverse visual order, each div child overlapping the next by 0.75em. Hovering a child scales it to 1.05. Vertical mode only centres the column.
tabs (horizontal): children are centred and the first gets a rounded top-left corner. Vertical mode makes children full-width with square corners.