Skip to main content

Divider

A divider separates content and represents a thematic break between elements.

Default: 'center'

Use to specify alignment of contents of divider.

Default: 'inline'

Use to specify direction of divider.

string

A unique identifier for the component.

Extract<, 'small' | 'base' | 'large' | 'extraLarge'>
Default: 'small'

Use to create dividers with varying widths.

Was this section helpful?

Basic Divider

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

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

function Extension() {
return <Divider />;
}

Preview