import { Group } from '@uhg-abyss/web/ui/Group';

align

justify

gap

wrap

grow

preventGrowOverflow

() => {
  return (
    <Group css={{ height: '160px' }}>
      <Docs.ExampleBoxV2>Item 1</Docs.ExampleBoxV2>
      <Docs.ExampleBoxV2>Item 2</Docs.ExampleBoxV2>
      <Docs.ExampleBoxV2>Item 3</Docs.ExampleBoxV2>
    </Group>
  );
};

Gap, align, and justify

Use the gap prop to set the space between children. This corresponds to the CSS gap value. Accepts a $web.semantic.spacing.scale.* token (e.g. $web.semantic.spacing.scale.lg) or a raw CSS length. Defaults to $web.semantic.spacing.scale.lg.

Use the justify prop to control main-axis (horizontal) alignment. This corresponds to the CSS justify-content value. The possible values are 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', or 'space-evenly'. Defaults to 'flex-start'.

Use the align prop to control cross-axis (vertical) alignment. This corresponds to the CSS align-items value. The possible values are 'stretch', 'flex-start', 'flex-end', 'center', or 'baseline'. Defaults to 'center'.

Grow

Use the grow prop so each child gets flex-grow: 1 and expands to fill the row. With preventGrowOverflow (on by default) children stay to an equal share; set it to false to let them grow from their content size. Defaults to true.

Wrap

Use the wrap prop to control whether children should wrap onto multiple lines when they overflow. This corresponds to the CSS flex-wrap value. The possible values are 'nowrap', 'wrap', or 'wrap-reverse'. Defaults to 'wrap'.

Group Props

Name	Type	Default	Description
align	"center" | "baseline" | "flex-start" | "flex-end" | "stretch" | undefined	'center'	Cross-axis (vertical) alignment of children.
asElement	string | undefined	'div'	Determine what type of html element the Group will render
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined		The elements to arrange horizontally. Rendered as-is, with no wrapper elements added around individual children.
className	string | undefined		CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-group-root", CSSProperties>> | undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
gap	Space | undefined	'$web.semantic.spacing.scale.lg'	The space between children — a $web.semantic.spacing.scale.* token or a raw CSS length.
grow	boolean | undefined	false	If set, each child gets flex-grow: 1 so children expand to fill the row.
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
justify	"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined	'flex-start'	Main-axis (horizontal) distribution of children.
preventGrowOverflow	boolean | undefined	true	When grow is set, keeps children to an equal share of the row instead of letting them grow past it based on content. Only applies with grow.
slotProps	Partial<Record<"group-root", SlotPropsLeafValue>> | undefined
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.
wrap	"wrap" | "nowrap" | "wrap-reverse" | undefined	'wrap'	Whether children wrap onto multiple lines when they overflow the row.

Group Classes

Class Name	Description
.abyss-group-root	Group root element