Group

Horizontal flex container for grouping related elements with consistent spacing.

ConcreteTerrazzoOakBrassLinen

Usage

import { Group, GroupProps } from "@instruments/materia-ui/components/group";

Group is a horizontal cluster of related controls (buttons, chips) that can wrap; for a vertical stack use Stack, for full flex control use Flex.
Control horizontal distribution with position (its justify prop) and vertical alignment with align; both gap and wrap accept per-breakpoint objects.
as and render are mutually exclusive (render wins, dev-warned); as draws from the closed layout vocabulary, so as="button" is a type error (use Button).
Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

Prop	Type	Description
align	`LayoutResponsiveValue<FlexAlign>`	Align items (vertical alignment). Can be responsive.
as	`"div" \| "article" \| "aside" \| "figcaption" \| "figure" \| "footer" \| "header" \| "li" \| "main" \| "nav" \| "ol" \| "section" \| "span" \| "ul"`	Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: `as="button"` is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. `as` and `render` are mutually exclusive; if both are passed, `render` wins (a dev-only warning fires).
gap	`LayoutResponsiveValue<"base" \| "none" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "3xs">`	Gap between items. Can be responsive.
position	`LayoutResponsiveValue<FlexJustify>`	Justify content (horizontal alignment). Can be responsive.
responsiveMode	`ResponsiveMode`	Responsive mode: "screen" (viewport) or "container" (container queries).
wrap	`LayoutResponsiveValue<boolean>`	Allow items to wrap. Can be responsive.
ref	`LayoutRef \| undefined`	Ref to the rendered host, whichever element `as` selects.