Inline

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

Alpha

This component and its documentation 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
children?React.ReactNode
align?'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly'

Horizontal alignment of children.

Defaults to 'start'.

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

Vertical alignment of children.

Defaults to 'center'.

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

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

Defaults to '4'.

wrap?boolean

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

Defaults to true.