Stack

Use to lay out a horizontal row of components or to achieve no-fuss vertical centering. A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the wrapping, spacing, and relative size of the items in the stack.

Examples

Use to quickly lay out a horizontal row of components and maintain their relative sizes. On small screens, children rows wrap down to additional rows as needed.

Drag to resize example

Props

alignment
"leading" | "trailing" | "center" | "fill" | "baseline"
Adjust vertical alignment of elements
children
any
Elements to display inside stack
distribution
"equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly"
Adjust horizontal alignment of elements
spacing
"extraTight" | "tight" | "loose" | "extraLoose" | "none"
Adjust spacing between elements
vertical
boolean
Stack the elements vertically
wrap
boolean
Wrap stack elements to additional rows as needed on small screens (Defaults to true)

Best Practices

Stacks should:

  • Be used for small-scale layout tasks when you want a row of components that should wrap on small screen widths
  • Be used to vertically center two elements
  • Not be used for complex or unique arrangements of components
  • Not be used for large-scale page layout

Content guidelines

There are no content elements that are specific to stack.