Skip to main content

Stack

Organizes elements horizontally or vertically along the block or inline axis. Use to structure layouts, group related components, or control spacing between elements.

Anchor to propertiesProperties

Anchor to alignContent
alignContent

Aligns the Stack along the cross axis.

Anchor to alignItems
alignItems

Aligns the Stack's children along the cross axis.

Anchor to blockSize
blockSize
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 columnGap
columnGap
'' |
Default: '' - meaning no override

Adjust spacing between elements in the inline axis. This overrides the column value of gap.

Anchor to direction
direction
'block' | 'inline'
Default: 'block'

Sets how the children are placed within the Stack. This uses logical properties.

Anchor to gap
gap
<>
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 id
id
string

A unique identifier for the element.

Anchor to inlineSize
inlineSize
Default: 'auto'

Adjust the inline size.

Anchor to justifyContent
justifyContent
Default: 'normal'

Aligns the Stack along the main axis.

Anchor to maxBlockSize
maxBlockSize
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 maxInlineSize
maxInlineSize
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 minBlockSize
minBlockSize
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 minInlineSize
minInlineSize
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 padding
padding
<>
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:

  • large means block-start, inline-end, block-end and inline-start paddings are large.
  • large none means block-start and block-end paddings are large, inline-start and inline-end paddings are none.
  • large none large means block-start padding is large, inline-end padding is none, block-end padding is large and inline-start padding is none.
  • large none large small means block-start padding is large, inline-end padding is none, block-end padding is large and inline-start padding is small.

A padding value of auto will use the default padding for the closest container that has had its usual padding removed.

Anchor to paddingBlock
paddingBlock
<'' | >
Default: '' - meaning no override

Adjust the block-padding.

  • large none means block-start padding is large, block-end padding is none.

This overrides the block value of padding.

Anchor to paddingBlockEnd
paddingBlockEnd
'' |
Default: '' - meaning no override

Adjust the block-end padding.

This overrides the block-end value of paddingBlock.

Anchor to paddingBlockStart
paddingBlockStart
'' |
Default: '' - meaning no override

Adjust the block-start padding.

This overrides the block-start value of paddingBlock.

Anchor to paddingInline
paddingInline
<'' | >
Default: '' - meaning no override

Adjust the inline padding.

  • large none means inline-start padding is large, inline-end padding is none.

This overrides the inline value of padding.

Anchor to paddingInlineEnd
paddingInlineEnd
'' |
Default: '' - meaning no override

Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.

Anchor to paddingInlineStart
paddingInlineStart
'' |
Default: '' - meaning no override

Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.

Anchor to rowGap
rowGap
'' |
Default: '' - meaning no override

Adjust spacing between elements in the block axis. This overrides the row value of gap.

Was this section helpful?

Code

<s-stack gap="small" direction="inline" justifyContent="center">
<s-badge tone="neutral">Paid</s-badge>
<s-badge tone="success">Active</s-badge>
</s-stack>

Preview