Components
Stack
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 p={400}><Button appearance='secondary'>Option 1</Button><Button appearance='secondary'>Option 2</Button><Button appearance='secondary'>Option 3</Button></Stack>
Stacks can also be distributed along on the horizontal axis:
<Stack direction='horizontal' p={400}><Button appearance='secondary'>Option 1</Button><Button appearance='secondary'>Option 2</Button><Button appearance='secondary'>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' p={400}><Button appearance='secondary'>Option 1</Button><Button appearance='secondary'>Option 2</Button><Button appearance='secondary'>Option 3</Button></Stack>
Properties
| Name | Type | Default | Description | Required? |
|---|---|---|---|---|
space | | 0
| 100
| 200
| 300
| 350
| 400
| 450
| 500
| 600
| string | 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.ReactNode |