Skip to contentShopify logoPolaris

Horizontal stack

Use to display children horizontally in a row. Based on CSS Flexbox.

Alpha

This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our component lifecycles.

The default wrapping behavior of children can be overridden using the wrap prop.

import React from 'react';
import {HorizontalStack} from '@shopify/polaris';


function InlineWithNonWrappingExample() {
  return (
    <HorizontalStack wrap={false}>
      <Placeholder width="106px" height="36px" />
      <Placeholder width="106px" height="20px" showBorder />
      <Placeholder width="106px" height="20px" showBorder />
      <Placeholder width="106px" height="20px" showBorder />
      <Placeholder width="106px" height="20px" showBorder />
      <Placeholder width="106px" height="20px" showBorder />
    </HorizontalStack>
  );
}

const Placeholder = ({height = 'auto', width = 'auto', showBorder = false}) => {
  return (
    <div
      style={{
        background: 'var(--p-color-text-info)',
        height: height,
        width: width,
        borderInlineStart: showBorder
          ? '1px dashed var(--p-color-bg-success-subdued)'
          : 'none',
      }}
    />
  );
};

Props

Want to help make this feature better? Please share your feedback.

interface HorizontalStackProps
children?React.ReactNode
align?'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly'

Horizontal alignment of children.

blockAlign?'start' | 'center' | 'end' | 'baseline' | 'stretch'

Vertical alignment of children.

gap?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpaceScale>

The spacing between elements. Accepts a spacing token or an object of spacing tokens for different screen sizes.

wrap?boolean

Wrap stack elements to additional rows as needed on small screens.

Defaults to true.

Related components

Related resources

  • HorizontalStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about CSS logicial properties.