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.

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>
    </>
  );
}

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

BlockSpacerProps

BlockSpacerProps

id

A unique identifier for the component.

spacing

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.

T | ConditionalStyle<T, ViewportSizeCondition>

ConditionalStyle

conditionals

An array of conditional values.

default

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

ConditionalValue

conditions

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

value

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

ViewportSizeCondition

viewportInlineSize

Spacing

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

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

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

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.

StylesConditionalStyle

conditionals

An array of conditional values.

default

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

StylesConditionalValue

conditions

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

value

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

StylesBaseConditions

focus

hover

resolution

viewportInlineSize

ViewportInlineSize

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

StylesConditions

focus

hover

viewportInlineSize