# InlineSpacer

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.

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

render('Checkout::Dynamic::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 {
  extend,
  InlineSpacer,
  InlineStack,
  View,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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);
});

```

## InlineSpacerProps

### InlineSpacerProps

### spacing

value: `MaybeResponsiveConditionalStyle<Exclude<Spacing, 'none'>>`

  - MaybeResponsiveConditionalStyle: T | ConditionalStyle<T, ViewportSizeCondition>
  - ConditionalStyle: 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>[];
}
  - Spacing: 'none' | 'base' | 'extraTight' | 'tight' | 'loose' | 'extraLoose'
Adjust size of the spacer

### id

value: `string`

A unique identifier for the component.

### ConditionalStyle

### default

value: `T`

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

### conditionals

value: `ConditionalValue<T, AcceptedConditions>[]`

  - ConditionalValue: 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;
}
An array of conditional values.

### ConditionalValue

### conditions

value: `AcceptedConditions`

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

### value

value: `T`

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

### ViewportSizeCondition

### viewportInlineSize

value: `{ min: ViewportInlineSize; }`

  - ViewportInlineSize: 'small' | 'medium' | 'large'