Skip to contentShopify logoPolaris

Alpha stack

Use to display elements vertically with items placed directly below the preceding item.

Alpha

This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

By default, stack is left aligned and stacked items are spaced with 16px in between.

import React from 'react';
import {AlphaStack, Text} from '@shopify/polaris';


function AlphaStackExample() {
  return (
    <AlphaStack>
      <Placeholder width="320px" label="Stack child" />
      <Placeholder width="320px" />
      <Placeholder width="320px" />
    </AlphaStack>
  );
}

const Placeholder = ({
  label = '',
  height = 'auto',
  width = 'auto',
  childWidth = 'auto',
}) => {
  return (
    <div
      style={{
        background: '#7B47F1',
        padding: '14px var(--p-space-2)',
        height: height ?? undefined,
        width: width ?? undefined,
      }}
    >
      <div
        style={{
          display: 'inline-block',
          background: 'rgba(255, 255, 255, 0.3)',
          color: '#FFFFFF',
          width: childWidth ?? undefined,
        }}
      >
        <Text as="h2" variant="bodyMd" fontWeight="medium">
          {label}
        </Text>
      </div>
    </div>
  );
};

Props

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

interface AlphaStackProps
as?'div' | 'ul' | 'ol' | 'fieldset'

HTML Element type.

Defaults to 'div'.

children?React.ReactNode

Elements to display inside stack.

align?'start' | 'end' | 'center'

The vertical alignment of elements.

Defaults to 'start'.

fullWidth?boolean

Toggle elements to be full width.

spacing?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

The spacing between elements.

Defaults to '4'.