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. Use StackItem to group multiple elements inside a Stack together.

Props

optional = ?

Name Type Description
vertical? boolean Stack the elements vertically. Defaults to Horizontal
alignment? "leading" | "trailing" | "fill" | "center" | "baseline" Defines how elements are arranged along the axis
distribution? "leading" | "trailing" | "center" | "fill" Alignment of element perpendicular to the axis. Default value: 'Leading'
spacing? "none" | "extraTight" | "tight" | "loose" | "extraLoose" Spacing between elements
wrap? boolean Wrap elements to additional rows as needed on small screens. Default value

Guidelines

  • 📱 All children of Stack are placed in a single view object, which makes recycling the views expensive and results in poorer performance when scrolling. Consider keeping your Stacks simple.
  • By default, Stacks alignment is 'leading’.
  • Distribution is ignored for vertical stacks
✅ Do 🛑 Don't
📱 Keep Stacks narrow. There is typically more vertical space than horizontal 📱 Use complex and deep Stack layouts
📱 Keep Horizontal Stacks shallow. Complex hierarchies have performance penalties

For more guidelines, refer to Polaris' Stack best practices.

On this page