Stack is a low-level utility component for arranging items in a horizontal or vertical stack, with even spacing between the items.
This is useful when developing components in isolation from the deployed product environment, and it is unclear whether there will be surrounding content, what the nature of that content will be, and what the spacing requirements in different contexts will be.
Import
import {Stack} from '@fuegokit/react'
Usage
The spacing between elements in the Stack is controlled using values from the spacing scale, with a default value set at a spacing value of 3 (or 8px).
Using Stack helps you avoid redundant margin. It's handy in layouts when it's hard to predict the spacing context an element may wind up in, or what may surround the elements.
Stack can be useful when composing layouts, generally.
Direction
Stack renders horizontally or vertically by providing row or column to the direction prop.
Size
Stack's size prop accepts values corresponding to Fuegokit's base-8 scale values. See the theme reference for the list of scale values.
Recursion
Using the recursive prop with vertical stacks is helpful when you need equal white space between elements at any nesting level.
Why should I use a Stack component?
The Space between elements in a design creates visual harmony, and allows people to understand how elements are related to one another, helping them organize visual information better.
Often we compose elements in isolation from one another, and it isn't until later that it can be become clear whether there will be surrounding content or what the nature of that content will be.
Fuegokit React's Stack layout primitive injects margin between elements via their common parent, consuming values from Fuegokit's design tokens:
.stack > * + * {margin-block-start: ${themeGet('space.3')}}
Using the adjacent sibling combinator (+) means that the margin-block-start value will only be applied where the element is preceded by another element, so there's no “left over” margin.