Group
Introduction
A visual layout component for grouping related elements, buttons, or controls together. It can attach elements directly to form single composite visual inputs (e.g., button groups) or stretch them evenly across the container.
The Group component is fully integrated as a group block in the Page Builder, allowing content authors and developers to easily construct unified action sets, tab indicators, or custom button toolbars directly within the CMS.
Usage
These examples illustrate how content editors bind and structure group controls.
1. Attached Button Toolbar
Attaches elements closely together, sharing borders and rounded corners. Often used to group sequential action triggers or toolbar options.
{
"type": "group",
"attached": true,
"children": [
{ "type": "button", "text": "Yes" },
{ "type": "button", "text": "Maybe", "variant": "outline" },
{ "type": "button", "text": "No", "variant": "outline" }
]
}
2. Horizontal Action Bar (Evenly Distributed)
Instructs all inner child items to grow and stretch equally to fill the entire horizontal width of the container.
{
"type": "group",
"grow": true,
"children": [
{ "type": "button", "text": "Save Draft" },
{ "type": "button", "text": "Publish Page", "variant": "outline" }
]
}
3. Vertical Group Control
Groups elements sequentially along the vertical axis (Y-axis).
{
"type": "group",
"orientation": "vertical",
"attached": true,
"children": [
{ "type": "button", "text": "Top Action" },
{ "type": "button", "text": "Middle Action", "variant": "outline" },
{ "type": "button", "text": "Bottom Action", "variant": "outline" }
]
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Attached (attached) | boolean | false | Whether to collapse outer borders and corner radiuses of nested children into a unified group card. |
Stretch Children (grow) | boolean | false | Instructs child components to flex and stretch evenly to fill all available container width. |
Orientation (orientation) | select | "horizontal" | Direction along which children are grouped. • Options: "horizontal", "vertical". |
Children Content (children) | list | - | The collection of nested blocks (typically Button, Badge, or Text) inside the group. |
Custom Class (class) | string | - | Custom CSS class overrides applied directly to the group container. |
Developer Notes & Accessibility
- Border Collapsing Mechanics: When
attachedis enabled, border-radiuses are automatically recalculated so that only the outermost corners of the first and last child elements remain rounded, creating a sleek composite button bar. - Visual Group Accessibility: Ensure that any nested controls maintain logical focus flows. When forming button groups representing single choice controls, consider wrapping the entire structure in an accessible role or fieldset.