We recommend using the grid layout component instead of the Stack component.
Interactive demo
This demo allows you to preview the stack, its variations, and configuration options.
Anatomy
The stack is comprised of one required element and one optional element
| Item | Name | Description | Component | Optional |
|---|
Overview
The stack specifies the layout of its children components and can be used to quickly and easily layout elements on a page without needing to write any CSS. Auto-layout is the equivalent of a stack in Figma.
Distribution
Its children can be distributed by using the ‘distribution’ property, which is a direct mapping to the flexbox property justify-content
1<Stack
2 flow="horizontal-center"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="flex-start"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="flex-end"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="space-around"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="space-between"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="space-evenly"
4>
5 ...
6</Stack>Flow
The stack supports eight different flows: four vertical and four horizontal. For elements to expand on the cross-axis, they will need to be either display:flex or display:flex-inline.
1<Stack
2 flow="horizontal-stretch"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-top"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-bottom"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-left"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-center"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-right"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-stretch"
3 stackDistribution="center"
4>
5 ...
6</Stack>Wrap
The stack has the ability to wrap elements to prevent them from overflowing.
1<Stack
2 wrap="wrap"
3 flow="horizontal-top"
4>
5 ...
6</Stack>1<Stack
2 wrap="wrap"
3 flow="vertical-left"
4>
5 ...
6</Stack>Spacing
The stack supports adding a fixed space between its children and rows of children when the stack is wrapping spaceInline will be applied in the flow of the elements.
1<Stack
2 flow="horizontal-top"
3 spaceInline="space040"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-top"
3 spaceStack="space040"
4 width="150px"
5 wrap="wrap"
6>
7 ...
8</Stack>1<Stack
2 flow="vertical-left"
3 spaceInline="space040"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-left"
3 spaceStack="space040"
4 height="150px"
5 wrap="wrap"
6>
7 ...
8</Stack>Ordering
The stack supports the ability to define the order of the elements within the stack.
1<Stack flow="horizontal-center">
2 <StackChild order={2}>
3 <StackItem>1</StackItem>
4 </StackChild>
5 <StackChild order={3}>
6 <StackItem>2</StackItem>
7 </StackChild>
8 <StackChild order={1}>
9 <StackItem>3</StackItem>
10 </StackChild>
11</Stack>Reverse
The stack supports the ability to be reversed
1<Stack flowReverse flow="horizontal-center">
2 <StackItem>1</StackItem>
3 <StackItem>2</StackItem>
4 <StackItem>3</StackItem>
5</Stack>StackChild
The StackChild provides a utility that allows items to be placed out of order. This is particularly useful for building accessible interfaces. It is required for the component to be used within a stack. Its behaviour is derived from the functionality of a child element in a classic flexbox container .
1<Stack flow="horizontal-center">
2 <StackChild>
3 <StackItem>1</StackItem>
4 </StackChild>
5 <StackChild>
6 <StackItem>2</StackItem>
7 </StackChild>
8 <StackChild>
9 <StackItem>3</StackItem>
10 </StackChild>
11</Stack>Accessibility considerations
The stack can be used to build accessible interfaces.
| Element | Attribute | Value | Description | User supplied |
|---|
StackChild can accept an order prop to visually display elements in a different order than they appear on the DOM, while preserving the tab order.
API
The stack has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
The stackChild has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|