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 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.

import {Stack, Badge} from '@shopify/polaris';
import React from 'react';

function StackExample() {
  return (
    <Stack>
      <Badge>Paid</Badge>
      <Badge>Processing</Badge>
      <Badge>Fulfilled</Badge>
      <Badge>Completed</Badge>
    </Stack>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface StackProps

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

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

Stack item

The stack component will treat multiple elements wrapped in a stack item component as one item. By default, each individual element is treated as one stack item. Use the fill prop on a single stack item component to make it fill the rest of the available horizontal space. See the “Stack where a single item fills the remaining space” example.

Stack item properties

Prop	Type	Description	Default
fill	boolean	Fill the available horizontal space in the stack with the item	false
children	any	Elements to display inside stack item

To create the large-scale structure of pages, use the layout component

Accessibility

The stack component is for alignment only and doesn’t provide any structural information for assistive technologies. To convey relationships between specific items, consider using the list component.