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

string

A unique identifier for the component.

spacing

Default: 'base'

Adjust size of the spacer

Was this section helpful?

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.

default

<T>(defaultValue: T) => <T, >

required

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

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.

Was this section helpful?

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>

</>

);

}