---
title: InlineSpacer
description: >-
  InlineSpacer is used to create empty inline space, typically when variable
  spacing is needed between multiple elements.


  Note that you should favor InlineStack when spacing between all elements is
  the same.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/structure/inlinespacer
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/structure/inlinespacer.md
---

# Inline​Spacer

InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements.

Note that you should favor InlineStack when spacing between all elements is the same.

## InlineSpacerProps

* id

  string

  A unique identifier for the component.

* spacing

  MaybeResponsiveConditionalStyle\<Exclude\<Spacing, 'none'>>

  Default: 'base'

  Adjust 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. To learn more check out the \[conditional styles]\(/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.

```ts
T | ConditionalStyle<T, ViewportSizeCondition>
```

### ConditionalStyle

* conditionals

  An array of conditional values.

  ```ts
  ConditionalValue<T, AcceptedConditions>[]
  ```

* default

  The default value applied when none of the conditional values specified in \`conditionals\` are met.

  ```ts
  T
  ```

```ts
export interface ConditionalStyle<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: ConditionalValue<T, AcceptedConditions>[];
}
```

### ConditionalValue

* conditions

  The conditions that must be met for the value to be applied. At least one condition must be specified.

  ```ts
  AcceptedConditions
  ```

* value

  The value that will be applied if the conditions are met.

  ```ts
  T
  ```

```ts
export interface ConditionalValue<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The conditions that must be met for the value to be applied. At least one
   * condition must be specified.
   */
  conditions: AcceptedConditions;
  /**
   * The value that will be applied if the conditions are met.
   */
  value: T;
}
```

### ViewportSizeCondition

* viewportInlineSize

  ```ts
  { min: T; }
  ```

```ts
export interface ViewportSizeCondition<T = ViewportInlineSize> {
  viewportInlineSize: {min: T};
}
```

### Spacing

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

### Examples

* #### Basic InlineSpacer

  ##### React

  ```tsx
  import {
    reactExtension,
    InlineSpacer,
    InlineStack,
    View,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.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

  ```js
  import {
    extension,
    InlineSpacer,
    InlineStack,
    View,
  } from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.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);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/inlinespacer-default.png)