Choose a version:

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.

Anchor to blockspacerpropsBlockSpacerProps

Anchor to id id string: A unique identifier for the component.
Anchor to spacing spacing <> Default: 'base': Adjust size of the spacer

BlockSpacerProps

id
A unique identifier for the component.
```
string
```

spacing

Adjust size of the spacer

MaybeResponsiveConditionalStyle<Spacing>

export interface BlockSpacerProps extends IdProps {
  /**
   * Adjust size of the spacer
   *
   * @defaultValue 'base'
   **/
  spacing?: MaybeResponsiveConditionalStyle<Spacing>;
}

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.

T | ConditionalStyle<T, ViewportSizeCondition>

ConditionalStyle

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

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.
```
AcceptedConditions
```
value
The value that will be applied if the conditions are met.
```
T
```

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
```
{ min: T; }
```

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

Spacing

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

Was this section helpful?

Anchor to stylehelperStyleHelper

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.

Anchor to default default <T>(defaultValue: T) => <T, > required: Sets an optional default value to use when no other condition is met.
Anchor to when when <T>(conditions: , value: T) => <T, > required: 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.

DocsStyle

default
Sets an optional default value to use when no other condition is met.
```
<T>(defaultValue: T) => StylesConditionalStyle<T, StylesBaseConditions>
```
when
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.
```
<T>(conditions: StylesConditions, value: T) => StylesConditionalStyle<T, StylesBaseConditions>
```

export interface DocsStyle {
  /**
   * Sets an optional default value to use when no other condition is met.
   *
   * @param defaultValue The default value
   * @returns The chainable condition style
   */
  default: <T>(defaultValue: T) => StylesConditionalStyle<T>;
  /**
   * 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.
   *
   * @param conditions The condition(s)
   * @param value The conditional value that can be applied if the conditions are met
   * @returns The chainable condition style
   */
  when: <T>(
    conditions: StylesConditions,
    value: T,
  ) => StylesConditionalStyle<T>;
}

StylesConditionalStyle

conditionals

An array of conditional values.

StylesConditionalValue<T, AcceptedConditions>[]

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

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

StylesConditionalValue

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

export interface StylesConditionalValue<
  T,
  AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
> {
  /**
   * 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;
}

StylesBaseConditions

focus
```
true
```
hover
```
true
```
resolution
```
1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4
```
viewportInlineSize
```
{ min: ViewportInlineSize; }
```

export interface StylesBaseConditions {
  viewportInlineSize?: {min: ViewportInlineSize};
  hover?: true;
  focus?: true;
  resolution?: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4;
}

ViewportInlineSize

'extraSmall' | 'small' | 'medium' | 'large'

StylesConditions

focus
```
true
```
hover
```
true
```
viewportInlineSize
```
{ min: ViewportInlineSize; }
```

export interface StylesConditions {
  viewportInlineSize?: {min: ViewportInlineSize};
  hover?: true;
  focus?: true;
}

Was this section helpful?

Basic BlockSpacer

import {

reactExtension,

BlockSpacer,

View,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

View

</View>

View

</View>

</>

);

}

examples

Basic BlockSpacer

React

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

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

JS

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

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

BlockSpacer

Anchor to blockspacerpropsBlockSpacerProps

BlockSpacerProps

MaybeResponsiveConditionalStyle

ConditionalStyle

ConditionalValue

ViewportSizeCondition

Spacing

Anchor to stylehelperStyleHelper

DocsStyle

StylesConditionalStyle

StylesConditionalValue

StylesBaseConditions

ViewportInlineSize

StylesConditions

examples

Basic BlockSpacer

React

JS

Preview