Stack

Syntactic sugar around the <Flex /> component when used in a vertical direction. All properties which can be provided to <Flex /> are available here apart from direction.

Examples

Stack

Item 1

Item 2

Item 3

Code

<Stack gap="12px">
  <Placeholder>
    Item 1
  </Placeholder>
  <Placeholder>
    Item 2
  </Placeholder>
  <Placeholder>
    Item 3
  </Placeholder>
</Stack>

Props

`atoms`

Applies permitted design system styles. See for more.

`gap`

any

Content renders with specified gap between the rows or columns if specified.

`listClassName`

any

Component adds specific class to the li element.

`alignItems`

any

Specifies how items are laid out along the cross axis.

`justifyContent`

any

Specifies how the space between and around the items is rendered.

`wrap`

any

Content will wrap to multiple lines if `true` is passed. Defaults to `false`.

`inline`

any

Determines if 'flex' or 'inline-flex' should be used.

`inputRef`

any

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509

`as`

ElementType