Components

Stack

Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the Flex component.

Import

import { Stack } from '@outfitio/outkit';

By default, each item is stacked vertically. Stack clones it's children and passes the spacing to them using margin-bottom or margin-right.

Pass the isInline prop or direction and set it to row.

Optionally, you can use align and justify to adjust the alignment and distribution of the items.

Pass the isReversed prop or set direction to row-reverse or column-reverse.

Name	Type	Default	Description
`isInline`	`boolean`	false	If `true` the items will be stacked horizontally.
`isReversed`	`boolean`	false	If `true` the items will be displayed in reverse order.
`direction`	`FlexProps["flexDirection"]`		The direction to stack the items.
`children`	`React.ReactNode`		The content of the stack.
`spacing`	`StyledSystem.MarginProps`		The space between each stack item
`align`	`FlexProps["alignItems"]`		The alignment of the stack item. Similar to `align-items`
`justify`	`FlexProps["justifyContent"]`		The distribution of the stack item. Similar to `justify-content`
`shouldWrapChildren`	`boolean`		If `true`, the children will be wrapped in a `Box` with `display: inline-block`, and the Box will take the spacing props