Stack
Overview
Stack is a layout component that arranges its children in a horizontal row or vertical column using flex.
When to use
t.b.d.
When to consider an alternative
t.b.d.
Component
Default
Default direction is horizontal with no gap between the children.
Gap
Use one of the predefined spacing tokens (Stack.Spacer.space) to apply a gap between the children of the Stack component.
Direction Vertical
Use the direction prop to change the direction of the Stack component to vertical.
Align Items
Use the alignItems prop to change the alignment of the children of the Stack component.
Justify Content
Use the justifyContent prop to change the alignment of the children of the Stack component.
Properties
Default
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| utilClassNames | String | false | - | |
| children | Node | false | - | |
| stackRef | Shape {
"current": "Any"
} | false | - | |
| direction | Enum Stack.Directions.vertical │ Stack.Directions.horizontal | false | horizontal | Exported as `Stack.Directions.vertical` etc. |
| gap | Enum Stack.Spacer.space │ Stack.Spacer.space2xs │ Stack.Spacer.spaceXs │ Stack.Spacer.spaceS │ Stack.Spacer.spaceM │ Stack.Spacer.spaceL │ Stack.Spacer.spaceXl │ Stack.Spacer.space2xl │ Stack.Spacer.space3xl | false | - | Exported as `Stack.Spacer.space` etc. |
| justifyContent | Enum Stack.JustifyContent.end │ Stack.JustifyContent.inherit │ Stack.JustifyContent.initial │ Stack.JustifyContent.start │ Stack.JustifyContent.left │ Stack.JustifyContent.center │ Stack.JustifyContent.right │ Stack.JustifyContent.revert │ Stack.JustifyContent.revertLayer │ Stack.JustifyContent.unset │ Stack.JustifyContent.spaceAround │ Stack.JustifyContent.spaceBetween │ Stack.JustifyContent.spaceEvenly │ Stack.JustifyContent.stretch │ Stack.JustifyContent.flexEnd │ Stack.JustifyContent.flexStart │ Stack.JustifyContent.normal | false | - | Exported as `Stack.JustifyContent.center` etc. |
| alignItems | Enum Stack.AlignItems.end │ Stack.AlignItems.baseline │ Stack.AlignItems.inherit │ Stack.AlignItems.initial │ Stack.AlignItems.start │ Stack.AlignItems.center │ Stack.AlignItems.revert │ Stack.AlignItems.revertLayer │ Stack.AlignItems.unset │ Stack.AlignItems.stretch │ Stack.AlignItems.flexEnd │ Stack.AlignItems.flexStart │ Stack.AlignItems.normal │ Stack.AlignItems.selfEnd │ Stack.AlignItems.selfStart | false | - | Exported as `Stack.AlignItems.center` etc. |
| flex | Bool | false | - |