Stack

Components

Stack

Code

The Stack component is a low-level primitive used to layout items in a horizontal or vertical stack, with even spacing between the items.

By default, the Stack component will distribute items vertically using space token 300 (8px) between the items.

import { Stack } from '@sproutsocial/racine'

<Stack bg='neutral.100' p={400}>
  <Button appearance='outline'>Option 1</Button>
  <Button appearance='outline'>Option 2</Button>
  <Button appearance='outline'>Option 3</Button>
</Stack>

<Stack bg='neutral.100' p={400}>
  <Button appearance='outline'>Option 1</Button>
  <Button appearance='outline'>Option 2</Button>
  <Button appearance='outline'>Option 3</Button>
</Stack>

Stacks can also be distributed along on the horizontal axis:

<Stack direction='horizontal' bg='neutral.100' p={400}>
  <Button appearance='outline'>Option 1</Button>
  <Button appearance='outline'>Option 2</Button>
  <Button appearance='outline'>Option 3</Button>
</Stack>

<Stack direction='horizontal' bg='neutral.100' p={400}>
  <Button appearance='outline'>Option 1</Button>
  <Button appearance='outline'>Option 2</Button>
  <Button appearance='outline'>Option 3</Button>
</Stack>

The spacing between items in the stack can be adjusted using Seeds tokens. In this example, a space value of 600 is used (40px), as well as a center alignment:

<Stack space={600} direction='horizontal' bg='neutral.100' p={400}>
  <Button appearance='outline'>Option 1</Button>
  <Button appearance='outline'>Option 2</Button>
  <Button appearance='outline'>Option 3</Button>
</Stack>

<Stack space={600} direction='horizontal' bg='neutral.100' p={400}>
  <Button appearance='outline'>Option 1</Button>
  <Button appearance='outline'>Option 2</Button>
  <Button appearance='outline'>Option 3</Button>
</Stack>

Properties

Name	Type	Default	Description
`space`	`TypeSpace`	`300`	Amount of space between items in the stack
`align`	`"left" \| "center" \| "right" \| "stretch"`	`"left"`	Alignment of the items in the stack (horizontal or vertical)
`direction`	`"vertical" \| "horizontal"`	`"vertical"`	Axis upon which the stack is laid out (left, center, right, or stretch)
`children`	`React.Node`