Divider
A divider separates content and represents a thematic break between elements.
Anchor to dividerpropsDividerProps
- Anchor to sizesizeExtract<, 'small' | 'base' | 'large' | 'extraLarge'>Default: 'small'
Use to create dividers with varying widths.
- Anchor to directiondirectionDefault: 'inline'
Use to specify direction of divider.
- Anchor to alignmentalignmentDefault: 'center'
Use to specify alignment of contents of divider.
- string
A unique identifier for the component.
DividerProps
- size
Use to create dividers with varying widths.
Extract<Size, 'small' | 'base' | 'large' | 'extraLarge'> - direction
Use to specify direction of divider.
Direction - alignment
Use to specify alignment of contents of divider.
Alignment - id
A unique identifier for the component.
string
export interface DividerProps extends IdProps {
/**
* Use to create dividers with varying widths.
*
* @defaultValue 'small'
*/
size?: Extract<Size, 'small' | 'base' | 'large' | 'extraLarge'>;
/**
* Use to specify direction of divider.
*
* @defaultValue 'inline'
*/
direction?: Direction;
/**
* Use to specify alignment of contents of divider.
*
* @defaultValue 'center'
*/
alignment?: Alignment;
}Size
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'Direction
'inline' | 'block'Alignment
'start' | 'center' | 'end'Was this section helpful?
Basic Divider
import {render, Divider} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => <Extension />);
function Extension() {
return <Divider />;
}
examples
Basic Divider
React
import {render, Divider} from '@shopify/checkout-ui-extensions-react'; render('Checkout::Dynamic::Render', () => <Extension />); function Extension() { return <Divider />; }JS
import {extend, Divider} from '@shopify/checkout-ui-extensions'; extend('Checkout::Dynamic::Render', (root) => { const divider = root.createComponent(Divider); root.appendChild(divider); });
Preview
