# BlockSpacer

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

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

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

render('Checkout::Dynamic::Render', () => <Extension />);

function Extension() {
  return (
    <>
      <View border="base" padding="base">
        View
      </View>
      <BlockSpacer spacing="loose" />
      <View border="base" padding="base">
        View
      </View>
    </>
  );
}

```

```js
import {extend, BlockSpacer, View} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const blockSpacer = root.createComponent(View, undefined, [
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(BlockSpacer, {spacing: 'loose'}),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
  ]);

  root.appendChild(blockSpacer);
});

```

## BlockSpacerProps

### BlockSpacerProps

### spacing

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

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>[]`

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; }`


## StyleHelper

Style is a helper for authoring conditional values for prop styles.

Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way.

### DocsStyle

### default

value: `<T>(defaultValue: T) => StylesConditionalStyle<T, StylesBaseConditions>`

Sets an optional default value to use when no other condition is met.

### when

value: `<T>(conditions: StylesConditions, value: T) => StylesConditionalStyle<T, StylesBaseConditions>`

Adjusts the style based on different conditions. All conditions, expressed
as a literal object, must be met for the associated value to be applied.

The `when` method can be chained together to build more complex styles.

### StylesConditionalStyle

### default

value: `T`

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

### conditionals

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

An array of conditional values.

### StylesConditionalValue

### 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.

### StylesBaseConditions

### viewportInlineSize

value: `{ min: "small" | "medium" | "large"; }`


### hover

value: `true`


### focus

value: `true`


### resolution

value: `1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4`


### StylesConditions

### viewportInlineSize

value: `{ min: "small" | "medium" | "large"; }`


### hover

value: `true`


### focus

value: `true`