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 accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context.

Only use this when the element's content is not enough context for users using assistive technologies.
Anchor to accessibilityRole accessibilityRole Default: 'generic': Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
Anchor to accessibilityVisibility accessibilityVisibility "visible" | "hidden" | "exclusive" Default: 'visible': Changes the visibility of the element.

visible: the element is visible to all users.

hidden: the element is removed from the accessibility tree but remains visible.

exclusive: the element is visually hidden but remains in the accessibility tree.
Anchor to alignContent alignContent Default: 'normal': Aligns the Stack's children along the block axis.

This overrides the block value of alignContent.
Anchor to alignItems alignItems Default: 'normal': Aligns the Stack's children along the block axis.
Anchor to background background Default: 'transparent': Adjust the background of the component.
Anchor to blockSize blockSize Default: 'auto': Adjust the block size.
Anchor to border border Default: 'none' - equivalent to `none base auto`.: Set the border via the shorthand property.

This can be a size, optionally followed by a color, optionally followed by a style.

If the color is not specified, it will be base.

If the style is not specified, it will be auto.

Values can be overridden by borderWidth, borderStyle, and borderColor.
Anchor to borderColor borderColor "" | Default: '' - meaning no override: Adjust the color of the border.
Anchor to borderRadius borderRadius <> Default: 'none': Adjust the radius of the border.
Anchor to borderStyle borderStyle "" | <> Default: '' - meaning no override: Adjust the style of the border.
Anchor to borderWidth borderWidth "" | <"small" | "small-100" | "base" | "large" | "large-100" | "none"> Default: '' - meaning no override: Adjust the width of the border.
Anchor to columnGap columnGap <"" | > Default: '' - meaning no override: Adjust spacing between elements in the inline axis.

This overrides the column value of gap. columnGap either accepts:

a single SpacingKeyword value (e.g. large-100)

OR a responsive value string with the supported SpacingKeyword as a query value.
Anchor to direction direction <"inline" | "block"> Default: 'block': Sets how the Stack's children are placed within the Stack.

direction either accepts:

a single value either inline or block

OR a responsive value string with the supported SpacingKeyword as a query value.
Anchor to display display <"auto" | "none"> Default: 'auto': Sets the outer display type of the component. The outer type sets a component's participation in flow layout.

auto the component's initial value. The actual value depends on the component and context.

none hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
Anchor to gap gap <<>> Default: 'none': Adjust spacing between elements.

gap can either accept:

a single SpacingKeyword value applied to both axes (e.g. large-100)

OR a pair of values (eg large-100 large-500) can be used to set the inline and block axes respectively

OR a responsive value string with the supported SpacingKeyword as a query value.
Anchor to inlineSize inlineSize Default: 'auto': Adjust the inline size.
Anchor to justifyContent justifyContent Default: 'normal': Aligns the Stack's children along the inline axis.
Anchor to maxBlockSize maxBlockSize Default: 'none': Adjust the maximum block size.
Anchor to maxInlineSize maxInlineSize Default: 'none': Adjust the maximum inline size.
Anchor to minBlockSize minBlockSize Default: '0': Adjust the minimum block size.
Anchor to minInlineSize minInlineSize Default: '0': Adjust the minimum inline size.
Anchor to overflow overflow "visible" | "hidden" Default: 'visible': Sets the overflow behavior of the element.

hidden: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.

visible: the content that extends beyond the element’s container is visible.
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.

padding also accepts a responsive value string with the supported PaddingKeyword as a query value.
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.

paddingBlock also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingBlockEnd paddingBlockEnd <"" | > Default: '' - meaning no override: Adjust the block-end padding.

This overrides the block-end value of paddingBlock.

paddingBlockEnd also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingBlockStart paddingBlockStart <"" | > Default: '' - meaning no override: Adjust the block-start padding.

This overrides the block-start value of paddingBlock.

paddingBlockStart also accepts a responsive value string with the supported PaddingKeyword as a query value.
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.

paddingInline also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingInlineEnd paddingInlineEnd <"" | > Default: '' - meaning no override: Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.

paddingInlineEnd also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to paddingInlineStart paddingInlineStart <"" | > Default: '' - meaning no override: Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.

paddingInlineStart also accepts a responsive value string with the supported PaddingKeyword as a query value.
Anchor to rowGap rowGap <"" | > Default: '' - meaning no override: Adjust spacing between elements in the block axis.

This overrides the row value of gap. rowGap either accepts:

a single SpacingKeyword value (e.g. large-100)

OR a responsive value string with the supported SpacingKeyword as a query value.

AccessibilityRole

'main' | 'header' | 'footer' | 'section' | 'region' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'

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

BaselinePosition

'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 | ContentPosition

BackgroundColorKeyword

'transparent' | ColorKeyword

ColorKeyword

'subdued' | 'base' | 'strong'

SizeUnitsOrAuto

SizeUnits | 'auto'

SizeUnits

`${number}px` | `${number}%` | `0`

BorderShorthand

Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.

BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`

BorderSizeKeyword

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'

BorderStyleKeyword

'none' | 'solid' | 'dashed' | 'dotted' | 'auto'

MaybeAllValuesShorthandProperty

T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`

BoxBorderRadii

'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'

BoxBorderStyles

'auto' | 'none' | 'solid' | 'dashed'

MaybeResponsive

T | `@container${string}`

SpacingKeyword

SizeKeyword | 'none'

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

SizeUnitsOrNone

SizeUnits | 'none'

PaddingKeyword

SizeKeyword | 'none'

Anchor to slotsSlots

Anchor to children children HTMLElement: The content of the Stack.

Examples

<s-stack gap="base">

<s-badge>Paid</s-badge>

<s-badge>Processing</s-badge>

<s-badge>Filled</s-badge>

<s-badge>Completed</s-badge>

</s-stack>

Preview

Examples

Code

jsx

<s-stack gap="base">
  <s-badge>Paid</s-badge>
  <s-badge>Processing</s-badge>
  <s-badge>Filled</s-badge>
  <s-badge>Completed</s-badge>
</s-stack>

html

<s-stack gap="base">
  <s-badge>Paid</s-badge>
  <s-badge>Processing</s-badge>
  <s-badge>Filled</s-badge>
  <s-badge>Completed</s-badge>
</s-stack>

Basic block stack (vertical)

Description

Default vertical stacking layout with consistent spacing between text elements.

jsx

<s-stack gap="base">
  <s-text>First item</s-text>
  <s-text>Second item</s-text>
  <s-text>Third item</s-text>
</s-stack>

html

<s-stack gap="base">
  <s-text>First item</s-text>
  <s-text>Second item</s-text>
  <s-text>Third item</s-text>
</s-stack>

Inline stack (horizontal)

Description

Horizontal layout for arranging badges or similar elements side by side.

jsx

<s-stack direction="inline" gap="large-100">
  <s-badge>Item 1</s-badge>
  <s-badge>Item 2</s-badge>
  <s-badge>Item 3</s-badge>
</s-stack>

html

<s-stack direction="inline" gap="large-100">
  <s-badge>Item 1</s-badge>
  <s-badge>Item 2</s-badge>
  <s-badge>Item 3</s-badge>
</s-stack>

Responsive stack with container queries

Description

Advanced responsive layout that changes direction and spacing based on container size.

jsx

<s-query-container>
  <s-stack
    direction="@container (inline-size > 500px) inline, block"
    gap="@container (inline-size > 500px) base, small-300"
  >
    <s-box
      padding="large-100"
      borderColor="base"
      borderWidth="small"
      borderRadius="large-100"
    >
      Content 1
    </s-box>
    <s-box
      padding="large-100"
      borderColor="base"
      borderWidth="small"
      borderRadius="large-100"
    >
      Content 2
    </s-box>
  </s-stack>
</s-query-container>

html

<s-query-container>
  <s-stack
    direction="@container (inline-size > 500px) inline, block"
    gap="@container (inline-size > 500px) base, small-300"
  >
    <s-box
      padding="large-100"
      borderColor="base"
      borderWidth="small"
      borderRadius="large-100"
    >
      Content 1
    </s-box>
    <s-box
      padding="large-100"
      borderColor="base"
      borderWidth="small"
      borderRadius="large-100"
    >
      Content 2
    </s-box>
  </s-stack>
</s-query-container>

Custom alignment

Description

Horizontal stack with space-between justification and center alignment for balanced layouts.

jsx

<s-stack direction="inline" justifyContent="space-between" alignItems="center">
  <s-text>Left aligned</s-text>
  <s-text>Centered text</s-text>
  <s-text>Right aligned</s-text>
</s-stack>

html

<s-stack direction="inline" justifyContent="space-between" alignItems="center">
  <s-text>Left aligned</s-text>
  <s-text>Centered text</s-text>
  <s-text>Right aligned</s-text>
</s-stack>

Custom spacing

Description

Stack with custom gap values and separate row/column gap controls for precise spacing.

jsx

<s-stack gap="large-100 large-500" rowGap="large-300" columnGap="large-200">
  <s-box
    padding="large-100"
    borderColor="base"
    borderWidth="small"
    borderRadius="large-100"
  >
    Box with custom spacing
  </s-box>
  <s-box
    padding="large-100"
    borderColor="base"
    borderWidth="small"
    borderRadius="large-100"
  >
    Another box
  </s-box>
</s-stack>

html

<s-stack gap="large-100 large-500" rowGap="large-300" columnGap="large-200">
  <s-box
    padding="large-100"
    borderColor="base"
    borderWidth="small"
    borderRadius="large-100"
  >
    Box with custom spacing
  </s-box>
  <s-box
    padding="large-100"
    borderColor="base"
    borderWidth="small"
    borderRadius="large-100"
  >
    Another box
  </s-box>
</s-stack>

Anchor to useful-forUseful for

Placing non-form items in rows or columns when sections don't work for your layout.
Controlling the spacing between elements.
For form layouts where you need multiple input fields on the same row, use s-grid instead.

Anchor to considerationsConsiderations

Stack doesn't add any padding by default. If you want padding around your stacked elements, use base to apply the default padding.
When spacing becomes limited, Stack will always wrap children to a new line.

Anchor to best-practicesBest practices

Use smaller gaps between small elements and larger gaps between big ones.
Maintain consistent spacing in stacks across all pages of your app.

Was this page helpful?