Inline
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.
Anchor to inlinespacerpropsInlineSpacerProps
string
A unique identifier for the component.
Anchor to spacing
spacing
<Exclude<, 'none'>>
Default: 'base'
Adjust size of the spacer
Was this section helpful?
Basic InlineSpacer
import {
reactExtension,
InlineSpacer,
InlineStack,
View,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.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>
);
}
Preview
