Stack
The Stack component organizes elements along the block (vertical) or inline (horizontal) axis. Use it to structure layouts and control spacing between elements.
The component automatically manages spacing through gap properties and supports flexible alignment and wrapping behavior. Complex grid-like layouts may require multiple nested Stack components or alternative layout approaches.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Use cases
- Layout arrangement: Arrange form elements, buttons, or content in vertical or horizontal layouts.
- Responsive design: Create layouts that adapt to different screen sizes and orientations.
- Spacing control: Control spacing between elements using gap properties for visual hierarchy.
- Content alignment: Align content precisely using
justifyandalignproperties.
Anchor to examplesExamples
Anchor to example-organize-elements-with-a-stackOrganize elements with a stack
Organize elements using a Stack component. This example shows a basic stack with spacing between child elements.
Organize elements with a stack
Organize elements with a stack
Examples
Organize elements with a stack
Description
Organize elements using a `Stack` component. This example shows a basic stack with spacing between child elements.
Default
<s-stack gap="small" direction="inline" justifyContent="center"> <s-badge tone="neutral">Paid</s-badge> <s-badge tone="success">Active</s-badge> </s-stack>
Anchor to propertiesProperties
Configure the following properties on the Stack component.
- Anchor to alignContentalignContentalignContentAlignContentKeywordAlignContentKeyword
Aligns the Stack along the cross axis.
- Anchor to alignItemsalignItemsalignItemsAlignItemsKeywordAlignItemsKeyword
Aligns the Stack's children along the cross axis.
- Anchor to blockSizeblockSizeblockSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'
Adjust the block size. Mobile surfaces: Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container.
- Anchor to columnGapcolumnGapcolumnGap"" | SpacingKeyword"" | SpacingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust spacing between elements in the inline axis. This overrides the column value of gap.
- Anchor to directiondirectiondirection"block" | "inline""block" | "inline"Default: 'block'Default: 'block'
Sets how the children are placed within the Stack. This uses logical properties.
- Anchor to gapgapgapMaybeTwoValuesShorthandProperty<SpacingKeyword>MaybeTwoValuesShorthandProperty<SpacingKeyword>Default: 'none'Default: 'none'
Adjust spacing between elements. A single value applies to both axes. A pair of values (eg large-100 large-500) can be used to set the inline and block axes respectively.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeinlineSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'
Adjust the inline size.
- Anchor to justifyContentjustifyContentjustifyContentJustifyContentKeywordJustifyContentKeywordDefault: 'normal'Default: 'normal'
Aligns the Stack along the main axis.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'
Adjust the maximum block size. Mobile surfaces: Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'
Adjust the maximum inline size. Mobile surfaces: Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container.
- Anchor to minBlockSizeminBlockSizeminBlockSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'
Adjust the minimum block size. Mobile surfaces: Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container.
- Anchor to minInlineSizeminInlineSizeminInlineSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'
Adjust the minimum inline size. Mobile surfaces: Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container.
- Anchor to paddingpaddingpaddingMaybeAllValuesShorthandProperty<PaddingKeyword>MaybeAllValuesShorthandProperty<PaddingKeyword>Default: 'none'Default: 'none'
Adjust the padding of all edges.
1-to-4-value syntax is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
- 4 values:
block-start inline-end block-end inline-start - 3 values:
block-start inline block-end - 2 values:
block inline
For example:
largemeans block-start, inline-end, block-end and inline-start paddings arelarge.large nonemeans block-start and block-end paddings arelarge, inline-start and inline-end paddings arenone.large none largemeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding isnone.large none large smallmeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding issmall.
A padding value of
autowill use the default padding for the closest container that has had its usual padding removed.- 4 values:
- Anchor to paddingBlockpaddingBlockpaddingBlockMaybeTwoValuesShorthandProperty<"" | PaddingKeyword>MaybeTwoValuesShorthandProperty<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-padding.
large nonemeans block-start padding islarge, block-end padding isnone.
This overrides the block value of
padding.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEnd"" | PaddingKeyword"" | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-end padding.
This overrides the block-end value of
.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStart"" | PaddingKeyword"" | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-start padding.
This overrides the block-start value of
.- Anchor to paddingInlinepaddingInlinepaddingInlineMaybeTwoValuesShorthandProperty<"" | PaddingKeyword>MaybeTwoValuesShorthandProperty<"" | PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline padding.
large nonemeans inline-start padding islarge, inline-end padding isnone.
This overrides the inline value of
padding.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEnd"" | PaddingKeyword"" | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-end padding.
This overrides the inline-end value of
.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStart"" | PaddingKeyword"" | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-start padding.
This overrides the inline-start value of
.- Anchor to rowGaprowGaprowGap"" | SpacingKeyword"" | SpacingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust spacing between elements in the block axis. This overrides the row value of gap.
AlignContentKeyword
Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
"normal" | BaselinePosition | ContentDistribution | OverflowPosition | ContentPositionBaselinePosition
"baseline" | "first baseline" | "last baseline"ContentDistribution
"space-between" | "space-around" | "space-evenly" | "stretch"OverflowPosition
`unsafe ${ContentPosition}` | `safe ${ContentPosition}`ContentPosition
"center" | "start" | "end"AlignItemsKeyword
Align items sets the align-self value on all direct children as a group.
"normal" | "stretch" | BaselinePosition | OverflowPosition | ContentPositionSizeUnitsOrAuto
SizeUnits | "auto"SizeUnits
`${number}px` | `${number}%` | `0`SpacingKeyword
SizeKeyword | "none"SizeKeyword
"small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"MaybeTwoValuesShorthandProperty
T | `${T} ${T}`JustifyContentKeyword
Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
"normal" | ContentDistribution | OverflowPosition | ContentPositionSizeUnitsOrNone
SizeUnits | "none"MaybeAllValuesShorthandProperty
T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`PaddingKeyword
SizeKeyword | 'none'Anchor to best-practicesBest practices
- Choose appropriate direction: Use
blockfor vertical arrangements like forms. Useinlinefor horizontal arrangements like button groups. Note that inline wraps while block doesn't. - Use design system spacing: Use
values for consistency. Start withbaseand adjust as needed. - Apply alignment properties: Use
for main axis distribution,for cross axis positioning,for extra space distribution. - Avoid percentages on mobile: Don't use percentage-based sizing within scrollable containers on mobile surfaces.
- Use gap for spacing control: Use
gapfor uniform spacing,for block axis,for inline axis.