Layout is a set of organizational components that follow the patterns of Flexbox.

Layout.Group

Used to align elements in a row.

Layout.Stack

Used to align elements in a column.

Layout.Group and Layout.Stack Props

Space

Use the space property to set the spacing for a Group or Stack. The default is set to 8.

AlignLayout

Use the alignLayout property to indicate the horizontal alignment of the items in a Group or Stack. For a Group, the possible options are left, center, and right. For a Stack, the possible options are left, center, and right. The default is set to left in both cases.

AlignItems

Use the alignItems property to indicate the alignment of the items in a Group or Stack. For a Group the vertical alignment is adjusted, whereas for a Stack the horizontal alignment is adjusted. For a Group, the possible options are top, center, and bottom. For a Stack, the possible options are left, center, and right. The default is set to center in both cases.

Grow

Use the grow property to indicate whether the grouped components should be stretched to fill the space horizontally. The default is set to false.

Shrink

Use the shrink property to indicate whether the grouped components should be shrunk to fill the space horizontally in a Group, to prevent an overflow. The default is set to false.

Layout.Insert

Used to place elements before and after a central component. Padding is $semantic.spacing.sm and direction is row by default.

Layout.Space

Adds a space of height space. Default is 16px.

Layout.Group Props

Name	Type	Default	Required	Description
alignItems	'top' | 'center' | 'bottom' | undefined	'center'	-	Adjust the vertical alignment of items in the group
alignLayout	'left' | 'center' | 'right' | 'between' | 'around' | undefined	'left'	-	Set the position of the group
children	React.ReactNode	-		The element the group wraps
grow	boolean | undefined	false	-	Flag to stretch grouped components to fit evenly or not
shrink	boolean | undefined	-	-	Flag to indicate whether the grouped components should be shrunk to fill the space horizontally in a Group, to prevent an overflow
space	Abyss.Space | undefined	8	-	Distance between elements in the Group component
width	Abyss.Size | undefined	-	-	Set the width of the group
wrap	boolean | undefined	-	-	Flag indicating if the elements should wrap to a new line

Layout.Stack Props

Name	Type	Default	Required	Description
alignItems	'left' | 'center' | 'right' | undefined	'center'	-	Adjust the horizontal alignment of items in the stack
alignLayout	'left' | 'center' | 'right' | undefined	'left'	-	Set the position of the stack
children	React.ReactNode	-		The element the stack wraps
grow	boolean | undefined	false	-	Flag to stretch grouped components to fit evenly or not
space	Abyss.Space | undefined	8	-	Distance between elements in the Stack component
width	Abyss.Size | undefined	-	-	Set the width of the stack
wrap	boolean | undefined	-	-	Flag to wrap the stack elements

Layout.Insert Props

Name	Type	Default	Required	Description
after	React.ReactNode | (() => React.ReactNode) | undefined	-	-	Insert element after children
before	React.ReactNode | (() => React.ReactNode) | undefined	-	-	Insert element before children
children	React.ReactNode | undefined	-	-	The element the inserted elements are between
direction	'row' | 'column' | undefined	'row'	-	The direction of of all the the elements
padding	Abyss.Space | undefined	'$semantic.spacing.sm'	-	The space between the inserted element and children

Layout.Space Props

Name	Type	Default	Required	Description
space	Abyss.Space | undefined	16	-	The amount of space to place between components

Layout.Group Classes

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

Layout.Stack Classes

Class Name	Description
abyss-layout-stack-root	Stack root element

Layout.Insert Classes

Class Name	Description
abyss-layout-insert-root	Insert root element
abyss-layout-insert-before	Insert before element
abyss-layout-insert-after	Insert after element

Layout.Space Classes

Class Name	Description
abyss-layout-space-root	Space root element