Divider
A divider separates content and represents a thematic break between elements.
Anchor to dividerpropsDividerProps
- Anchor to alignmentalignmentAlignmentDefault: 'center'
Use to specify alignment of contents of divider.
- Anchor to directiondirectionDirectionDefault: 'inline'
Use to specify direction of divider.
- string
A unique identifier for the component.
- Anchor to sizesizeExtract<Size, 'small' | 'base' | 'large' | 'extraLarge'>Default: 'small'
Use to create dividers with varying widths.
Alignment
'start' | 'center' | 'end'Direction
'inline' | 'block'Size
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'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 />;
}
Examples
Basic Divider
React
import { reactExtension, Divider, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { return <Divider />; }JS
import {extension, Divider} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const divider = root.createComponent(Divider); root.appendChild(divider); });
Preview
