Stackcomponent
A container for other components that allows them to be stacked horizontally or vertically. When building complex UIs, this will be your primary building block. Stacks always wrap the content to the next column or row.
Anchor to stackStack
Aligns the Stack along the cross axis.
Aligns the Stack's children along the cross axis.
Adjust the block size.
Auto takes the block size of the box's children.
Adjust spacing between elements in the inline axis.
This overrides the column value of gap
.
Sets how the Stack's children are placed within the Stack. 'vertical' and 'horizontal' are deprecated. Using these values will use the Stack implementation from 2024-10.
The flex value for the stack. Flex 1 will stretch the stack to fill the parent.
Whether the children should be stretched to fill the cross axis.
The size of the gap between each child in the stack.
Adjust the inline size.
Auto takes the inline size of the box's children.
Aligns the Stack along the main axis.
Adjust the maximum block size.
Adjust the maximum inline size.
Adjust the minimum block size.
Adjust the minimum inline size.
Adjust the padding of all edges in pixels.
Adjust the block-padding.
This overrides the block value of padding
.
Adjust the block-end padding.
This overrides the block-end value of .
Adjust the block-start padding.
This overrides the block-start value of .
Adjust the inline padding.
This overrides the inline value of padding
.
Adjust the inline-end padding.
This overrides the inline-end value of .
Adjust the inline-start padding.
This overrides the inline-start value of .
Adjust spacing between elements in the block axis.
This overrides the row value of gap
.
The alignment of the children along the main axis.
Use the prop instead.
Wrap behavior for the children of the stack.
Has no effect, content will always wrap.
The horizontal padding around the stack.
Use the prop instead.
The vertical padding around the stack.
Use the prop instead.
The spacing between each child in the stack.
Use the gap
prop instead.
Stack
Preview

Anchor to examplesExamples
The following examples will demonstrate some, but not all of the abilities of the Stack
component. For simplicity, these examples use the React version of the Stack
component, but the same results will be achieved by using the same properties with the regular JS library.
Anchor to inline-defaultInline Stack with default values
In this example, we specify inline
for the direction
. As you can see, we have two small buttons occupying just the amount of space that they need, at the left side of the Stack
. This is because is set to
start
by default. We also include a gap
of "200".
Inline Stack with default values

Anchor to inline-flex-childrenInline Stack with flexChildren
Similar to the example above, but this time we are specifying to be
true
. This means that the two buttons will take up the max amount of space that they can within the inline
stack.
Inline Stack with flexChildren

Anchor to inline-center-childrenInline Stack with centered children
You can also center elements in your inline
stack. For this, you can specify the to be
center
. However, in this case you also want to be
false
(which is the default), so that the children can take up the minimal amount of space that they need, and be centered.
Inline Stack with centered children

Anchor to inline-align-items-centerInline Stack with vertical axis centering
Here we have an inline
stack with two children. The first is a block stack with two buttons, and the second is a single button. Since the first element has a greater intrinsic height, our main inline stack's intrinsic height is also increased. We can center both children component along the main axis (x-axis) by setting the property to
center
.
Inline Stack with vertical axis centering

Anchor to blockBlock Stack
You can specify your Stack
to layout its children vertically by setting the direction
property to block
.
Block Stack

Anchor to extension-stack-block-space-betweenBlock Stack with space between children
Here we are spacing out the children of our block stack by setting to
space-between
in order to space the children out as much as possible along the vertical axis. Note that in this example, we removed the wrapping in order to introduce a custom height by setting the
to
50%
. We are also adding of
450
in order to mimic the padding applied to the UI Extension screen header.
Block Stack with space between children

Anchor to block-center-allBlock Stack centered on both axes
You can center your block stack on the vertical axis by setting to
center
. Next, you can set a custom size on your block stack by setting the and
. In this example we set them to
50%
and 100%
respectively. We can then center our elements along both axis of the stack by setting justifyContent to center
to center the children vertically, and setting both and
to
center
.
Block Stack centered on both axes

Anchor to block-align-content-stretchBlock Stack with horizontal stretching
This example demonstrates a block stack with elements stretched to fill the width of the container. By setting to
'stretch'
, the children will expand to fill the available horizontal space. This is useful when you want all elements to have consistent width, regardless of their content.
Block Stack with horizontally stretched contents

Anchor to nestedNested Stack
Now that we've run through a few examples of what a stack can do, let's move on to something more complex. You can nest multiple stacks of different configurations to achieve a more complex UI. In this example, we will create a row that displays several labels and an icon. This will mimic some of the basic rows that you can find across different POS screens.
Let's put the Selectable
aside for now; we'll get to that later. The first stack is which we can refer to as the parent stack, is set to inline. It has two main children, a block stack on the left, and an inline stack on the right. To space them out completely along the horizontal axis, we set our parent inline stack's to
space-between
. We also specify the to be
100%
to take up the full width of the screen.
The first child stack (the block stack) simply has a gap of 100 to space out the two Text
components.
The second child stack (the inline stack) has a gap of 600 to space out the Text
and the Icon
. We also set the and
properties to
center
to center the Text
and Icon
within their stack.
However, we also need to the and
properties to
center
on the parent inline stack to center the two children stacks along the vertical axis.
Finally, we can return to the Selectable
. You'll notice that we've wrapped the entire stack in a Selectable
. This makes the entire stack within the Selectable
become a tappable surface, with an handler, which is part of the
Selectable
component. It also gives a nice highlight effect when you tap, as you can see in the screenshot.
Nested Stack
