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 accessibilityLabelaccessibilityLabelstring
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 accessibilityRoleaccessibilityRole
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 accessibilityVisibilityaccessibilityVisibility"visible" | "hidden" | "exclusive"
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 alignContentalignContent
Aligns the Stack along the cross axis.
- Anchor to alignItemsalignItems
Aligns the Stack's children along the cross axis.
- Anchor to backgroundbackground
Adjust the background of the element.
- Anchor to blockSizeblockSize
Adjust the block size.
- Anchor to borderborder
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
,
, and
.
- Anchor to borderColorborderColor"" |
Set the color of the border.
If set, it takes precedence over the
border
property's color.- Anchor to borderRadiusborderRadius<>
Set the radius of the border.
1-to-4-value syntax is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
- 4 values:
start-start start-end end-end end-start
- 3 values:
start-start (start-end & end-start) start-end
- 2 values:
(start-start & end-end) (start-end & end-start)
For example:
small-100
means start-start, start-end, end-end and end-start border radii aresmall-100
.small-100 none
means start-start and end-end border radii aresmall-100
, start-end and end-start border radii arenone
.small-100 none large-100
means start-start border radius issmall-100
, start-end border radius isnone
, end-end border radius islarge-100
and end-start border radius isnone
.small-100 none large-100 small-100
means start-start border radius issmall-100
, start-end border radius isnone
, end-end border radius islarge-100
and end-start border radius issmall-100
.
- 4 values:
- Anchor to borderStyleborderStyle"" | <>
Set the style of the border.
If set, it takes precedence over the
border
property's style.Like CSS, up to 4 values can be specified.
If one value is specified, it applies to all sides.
If two values are specified, they apply to the block sides and inline sides respectively.
If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.
If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
- Anchor to borderWidthborderWidth"" | <"small" | "small-100" | "base" | "large" | "large-100" | "none">
Set the width of the border.
If set, it takes precedence over the
border
property's width.Like CSS, up to 4 values can be specified.
If one value is specified, it applies to all sides.
If two values are specified, they apply to the block sides and inline sides respectively.
If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.
If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
- Anchor to columnGapcolumnGap<"" | >
Adjust spacing between elements in the inline axis.
This overrides the column value of
gap
.either accepts: * a single SpacingKeyword value (e.g.
large-100
) OR a container query string with supported SpacingKeyword values as query values (e.g. @container (inline-size > 500px) large-300, small-300)- Anchor to directiondirection<"inline" | "block">
Sets how the Stack's children are placed within the Stack.
direction
either accepts: * a single value eitherinline
orblock
*OR a container query string with either of these values as a query value (e.g.@container (inline-size > 500px) inline, block
)- Anchor to displaydisplay<"auto" | "none">
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.
- <<>>
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 (eglarge-100 large-500
) can be used to set the inline and block axes respectively. * OR a container query string with supported SpacingKeyword values as query values (e.g.@container (inline-size > 500px) large-300, small-300)- Anchor to inlineSizeinlineSize
Adjust the inline size.
- Anchor to justifyContentjustifyContent
Aligns the Stack along the main axis.
- Anchor to maxBlockSizemaxBlockSize
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSize
Adjust the maximum inline size.
- Anchor to minBlockSizeminBlockSize
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSize
Adjust the minimum inline size.
- Anchor to overflowoverflow"visible" | "hidden"
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 paddingpadding<<>>
Adjust the padding of all edges.
1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) 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 arelarge
.large none
means block-start and block-end paddings arelarge
, inline-start and inline-end paddings arenone
.large none large
means block-start padding islarge
, inline-end padding isnone
, block-end padding islarge
and inline-start padding isnone
.large none large small
means block-start padding islarge
, inline-end padding isnone
, block-end padding islarge
and inline-start padding issmall
.
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 container query string with the supported PaddingKeyword as a query value e.g. (@container (inline-size > 500px) large-300, small-300
)This also accepts up to 4 values (e.g.
@container (inline-size > 500px) large-300 small-300 large-100 small-100, small-200
)- 4 values:
- Anchor to paddingBlockpaddingBlock<"" | <>>
Adjust the block-padding.
large none
means block-start padding islarge
, block-end padding isnone
.
This overrides the block value of
padding
.also accepts a container query string with the supported PaddingKeyword as a query value e.g. (
@container (inline-size > 500px) large-300, small-300
)This also accepts up to 2 values (e.g.
@container (inline-size > 500px) large-300 small-300, small-200
)- Anchor to paddingBlockEndpaddingBlockEnd<"" | >
Adjust the block-end padding.
This overrides the block-end value of
.
also accepts a container query string with the supported PaddingKeyword as a query value e.g. (
@container (inline-size > 500px) large-300, small-300
)This only accepts up to 1 value per predicate (e.g.
@container (inline-size > 500px) large-300, small-200
)- Anchor to paddingBlockStartpaddingBlockStart<"" | >
Adjust the block-start padding.
This overrides the block-start value of
.
also accepts a container query string with the supported PaddingKeyword as a query value e.g. (
@container (inline-size > 500px) large-300, small-300
)This only accepts 1 value per predicate (e.g.
@container (inline-size > 500px) large-300, small-200
)- Anchor to paddingInlinepaddingInline<"" | <>>
Adjust the inline padding.
large none
means inline-start padding islarge
, inline-end padding isnone
.
This overrides the inline value of
padding
.also accepts a container query string with the supported PaddingKeyword as a query value e.g. (
@container (inline-size > 500px) large-300, small-300
)This also accepts up to 2 values (e.g.
@container (inline-size > 500px) large-300 small-300, small-200
)- Anchor to paddingInlineEndpaddingInlineEnd<"" | >
Adjust the inline-end padding.
This overrides the inline-end value of
.
also accepts a container query string with the supported PaddingKeyword as a query value e.g. (
@container (inline-size > 500px) large-300, small-300
) This only accepts 1 value per predicate (e.g.@container (inline-size > 500px) large-300, small-200
)- Anchor to paddingInlineStartpaddingInlineStart<"" | >
Adjust the inline-start padding.
This overrides the inline-start value of
.
also accepts a container query string with the supported PaddingKeyword as a query value e.g. (
@container (inline-size > 500px) large-300, small-300
) This only accepts 1 value per predicate (e.g.@container (inline-size > 500px) large-300, small-200
)- Anchor to rowGaprowGap<"" | >
Adjust spacing between elements in the block axis.
This overrides the row value of
gap
.either accepts a single SpacingKeyword value (e.g.
large-100
) OR a container query string with supported SpacingKeyword values as query values (e.g. @container (inline-size > 500px) large-300, small-300)
Stack
- accessibilityLabel
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.
string
- accessibilityRole
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.
AccessibilityRole
- accessibilityVisibility
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.
"visible" | "hidden" | "exclusive"
- adoptedCallback
() => void
- alignContent
Aligns the Stack along the cross axis.
AlignContentKeyword
- alignItems
Aligns the Stack's children along the cross axis.
AlignItemsKeyword
- attributeChangedCallback
(name: string) => void
- background
Adjust the background of the element.
BackgroundColorKeyword
- blockSize
Adjust the block size.
SizeUnitsOrAuto
- border
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`.
BorderShorthand
- borderColor
Set the color of the border. If set, it takes precedence over the `border` property's color.
"" | ColorKeyword
- borderRadius
Set the radius of the border. [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: - 4 values: `start-start start-end end-end end-start` - 3 values: `start-start (start-end & end-start) start-end` - 2 values: `(start-start & end-end) (start-end & end-start)` For example: - `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`. - `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`. - `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`. - `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.
MaybeAllValuesShorthandProperty<BoxBorderRadii>
- borderStyle
Set the style of the border. If set, it takes precedence over the `border` property's style. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>
- borderWidth
Set the width of the border. If set, it takes precedence over the `border` property's width. Like CSS, up to 4 values can be specified. If one value is specified, it applies to all sides. If two values are specified, they apply to the block sides and inline sides respectively. If three values are specified, they apply to the block-start, both inline sides, and block-end respectively. If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
"" | MaybeAllValuesShorthandProperty<"small" | "small-100" | "base" | "large" | "large-100" | "none">
- click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
({ sourceEvent }?: ClickOptions) => void
- columnGap
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 container query string with supported SpacingKeyword values as query values (e.g. @container (inline-size > 500px) large-300, small-300)
MakeResponsive<"" | SpacingKeyword>
- connectedCallback
() => void
- direction
Sets how the Stack's children are placed within the Stack. `direction` either accepts: * a single value either `inline` or `block` *OR a container query string with either of these values as a query value (e.g. `@container (inline-size > 500px) inline, block`)
MakeResponsive<"inline" | "block">
- disconnectedCallback
() => void
- display
Sets the outer display type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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.
MakeResponsive<"auto" | "none">
- gap
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 container query string with supported SpacingKeyword values as query values (e.g.@container (inline-size > 500px) large-300, small-300)
MakeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>
- inlineSize
Adjust the inline size.
SizeUnitsOrAuto
- justifyContent
Aligns the Stack along the main axis.
JustifyContentKeyword
- maxBlockSize
Adjust the maximum block size.
SizeUnitsOrNone
- maxInlineSize
Adjust the maximum inline size.
SizeUnitsOrNone
- minBlockSize
Adjust the minimum block size.
SizeUnits
- minInlineSize
Adjust the minimum inline size.
SizeUnits
- overflow
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.
"visible" | "hidden"
- padding
Adjust the padding of all edges. 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) 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 container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`) This also accepts up to 4 values (e.g. `@container (inline-size > 500px) large-300 small-300 large-100 small-100, small-200`)
MakeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>
- paddingBlock
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 container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`) This also accepts up to 2 values (e.g. `@container (inline-size > 500px) large-300 small-300, small-200`)
MakeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>
- paddingBlockEnd
Adjust the block-end padding. This overrides the block-end value of `paddingBlock`. `paddingBlockEnd` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`) This only accepts up to 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
MakeResponsive<"" | PaddingKeyword>
- paddingBlockStart
Adjust the block-start padding. This overrides the block-start value of `paddingBlock`. `paddingBlockStart` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`) This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
MakeResponsive<"" | PaddingKeyword>
- paddingInline
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 container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`) This also accepts up to 2 values (e.g. `@container (inline-size > 500px) large-300 small-300, small-200`)
MakeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>
- paddingInlineEnd
Adjust the inline-end padding. This overrides the inline-end value of `paddingInline`. `paddingInlineEnd` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`) This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
MakeResponsive<"" | PaddingKeyword>
- paddingInlineStart
Adjust the inline-start padding. This overrides the inline-start value of `paddingInline`. `paddingInlineStart` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`) This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
MakeResponsive<"" | PaddingKeyword>
- queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
() => void
- rowGap
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 container query string with supported SpacingKeyword values as query values (e.g. @container (inline-size > 500px) large-300, small-300)
MakeResponsive<"" | SpacingKeyword>
- setAttribute
(name: string, value: string) => void
declare class Stack extends BoxElement implements StackProps {
constructor();
accessor direction: StackProps['direction'];
accessor justifyContent: StackProps['justifyContent'];
accessor alignItems: StackProps['alignItems'];
accessor alignContent: StackProps['alignContent'];
accessor gap: StackProps['gap'];
accessor rowGap: StackProps['rowGap'];
accessor columnGap: StackProps['columnGap'];
}
MakeResponsive
T | `@container${string}`
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
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
BaselinePosition
'baseline' | 'first baseline' | 'last baseline'
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
MaybeTwoValuesShorthandProperty
T | `${T} ${T}`
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'
AccessibilityRole
'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'
BackgroundColorKeyword
'transparent' | ColorKeyword
ColorKeyword
'subdued' | 'base' | 'strong'
SizeUnitsOrAuto
SizeUnits | 'auto'
SizeUnits
`${number}px` | `${number}%` | `0`
SizeUnitsOrNone
SizeUnits | 'none'
MaybeAllValuesShorthandProperty
T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`
PaddingKeyword
SizeKeyword | 'none'
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'
BorderStyleKeyword
'none' | 'solid' | 'dashed' | 'dotted' | 'auto'
BoxBorderStyles
'auto' | 'none' | 'solid' | 'dashed'
BoxBorderRadii
'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'
ClickOptions
- sourceEvent
The event you want to influence the synthetic click.
ActivationEventEsque
export interface ClickOptions {
/**
* The event you want to influence the synthetic click.
*/
sourceEvent?: ActivationEventEsque;
}
ActivationEventEsque
- button
number
- ctrlKey
boolean
- metaKey
boolean
- shiftKey
boolean
export interface ActivationEventEsque {
shiftKey: boolean;
metaKey: boolean;
ctrlKey: boolean;
button: number;
}
Code
examples
Code
<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>
<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><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> </body></html>
Preview
Anchor to useful-forUseful for
- Placing items in rows or columns when sections don't work for your layout.
- Controlling the spacing between elements.
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.