Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

InlineSpacer

The InlineSpacer component creates empty horizontal space between elements. Use InlineSpacer to insert variable amounts of inline-axis spacing when elements need different gaps, such as pushing an action button to the far right of a row.

InlineSpacer supports predefined spacing values from the design token set for consistent horizontal rhythm. When all elements need the same gap, use InlineStack with a spacing prop instead.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the InlineSpacer component.

Anchor to id id string: A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
Anchor to spacing spacing <Exclude<, 'none'>> Default: 'base': The size of the spacer.

MaybeResponsiveConditionalStyle

A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the `Style` helper which simplifies the creation of conditional styles.

T | ConditionalStyle<T, ViewportSizeCondition>

ConditionalStyle

A conditional style definition that maps one or more conditions to different values. The `default` value is used as a fallback when none of the conditions in `conditionals` are satisfied.

conditionals
An array of conditional values.
```
ConditionalValue<T, AcceptedConditions>[]
```
default
The default value applied when none of the conditional values specified in `conditionals` are met.
```
T
```

ConditionalValue

A single conditional branch that pairs a set of conditions with the value to apply when those conditions are met.

conditions
The conditions that must be met for the value to be applied. At least one condition must be specified.
```
AcceptedConditions
```
value
The value that will be applied if the conditions are met.
```
T
```

ViewportSizeCondition

A condition that targets layouts based on the inline size (width in horizontal writing modes) of the viewport.

viewportInlineSize
The minimum viewport inline size that the condition must match.
```
{ min: T; }
```

Spacing

A keyword that maps to a predefined spacing value from the design system. Use these instead of pixel values to ensure consistent spacing throughout the UI. - `none`: No spacing (0px). - `extraTight`: The smallest amount of spacing. - `tight`: A compact amount of spacing, suitable for tight layouts. - `base`: The default spacing, appropriate for most layouts. - `loose`: A generous amount of spacing, used to create visual separation. - `extraLoose`: The largest amount of spacing.

'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose'

Anchor to ExamplesExamples

Anchor to Add variable horizontal spacingAdd variable horizontal spacing

Use InlineSpacer to insert specific amounts of horizontal space between elements. This is useful when you need different spacing values between items in a row.

Add variable horizontal spacing

An InlineSpacer creating horizontal space between elements.

Add variable horizontal spacing

import {

reactExtension,

InlineSpacer,

InlineStack,

View,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return (

View

</View>

View

</View>

View

</View>

View

</View>

</InlineStack>

);

}

import {

extension,

InlineSpacer,

InlineStack,

View,

} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const inlineSpacer = root.createComponent(InlineStack, {spacing: 'none'}, [

root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),

root.createComponent(InlineSpacer, {spacing: 'loose'}),

root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),

root.createComponent(InlineSpacer, {spacing: 'tight'}),

root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),

root.createComponent(InlineSpacer, {spacing: 'base'}),

root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),

]);

root.appendChild(inlineSpacer);

});

React

import {
  reactExtension,
  InlineSpacer,
  InlineStack,
  View,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <InlineStack spacing="none">
      <View border="base" padding="base">
        View
      </View>
      <InlineSpacer spacing="loose" />
      <View border="base" padding="base">
        View
      </View>
      <InlineSpacer spacing="tight" />
      <View border="base" padding="base">
        View
      </View>
      <InlineSpacer spacing="base" />
      <View border="base" padding="base">
        View
      </View>
    </InlineStack>
  );
}

JS

import {
  extension,
  InlineSpacer,
  InlineStack,
  View,
} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const inlineSpacer = root.createComponent(InlineStack, {spacing: 'none'}, [
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(InlineSpacer, {spacing: 'loose'}),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(InlineSpacer, {spacing: 'tight'}),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(InlineSpacer, {spacing: 'base'}),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
  ]);

  root.appendChild(inlineSpacer);
});

Anchor to Best practicesBest practices

Prefer InlineStack for uniform spacing: If all elements need the same gap, use InlineStack with a spacing prop instead of multiple spacers.
Use design token sizes: Stick to predefined spacing values for consistency with the rest of the interface.
Avoid excessive spacers: Too many spacers make layout code harder to read. Consider whether a layout component with built-in spacing would be cleaner.

Anchor to LimitationsLimitations

InlineSpacer only creates horizontal (inline-axis) space. For vertical spacing, use BlockSpacer.
InlineSpacer is an empty element. It can't contain children or display content.
Spacing values are limited to the predefined design token set. Custom pixel values aren't supported.

Was this page helpful?