Skip to contentShopify logoPolaris

Inline

Use to arrange items in a horizontal row with equal spacing around them. Items wrap onto multiple lines when needed.

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.

Items are vertically centered with 16px of space around them. They’ll wrap onto multiple lines when needed.

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


function InlineExample() {
  return (
    <Inline>
      <Placeholder width="106px" height="36px" />
      <Placeholder width="106px" height="20px" />
      <Placeholder width="106px" height="20px" />
      <Placeholder width="106px" height="20px" />
      <Placeholder width="106px" height="20px" />
      <Placeholder width="106px" height="20px" />
    </Inline>
  );
}

const Placeholder = ({height = 'auto', width = 'auto'}) => {
  return (
    <div
      style={{
        background: '#7B47F1',
        height: height,
        width: width,
      }}
    />
  );
};

Props

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

interface InlineProps
align?'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly'

Adjust horizontal alignment of elements.

Defaults to 'start'.

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

Adjust vertical alignment of elements.

Defaults to 'center'.

spacing?"0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32"

The spacing between elements.

Defaults to '4'.

wrap?boolean

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

Defaults to true.

children?React.ReactNode

Elements to display inside stack.