Divider

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

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

render('Checkout::Dynamic::Render', () => );

function Extension() {
  return ;
}

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

extend('Checkout::Dynamic::Render', (root) => {
  const divider = root.createComponent(Divider);

  root.appendChild(divider);
});

DividerProps

DividerProps

size

Use to create dividers with varying widths.

direction

Use to specify direction of divider.

alignment

Use to specify alignment of contents of divider.

id

A unique identifier for the component.

Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'

Direction

'inline' | 'block'

Alignment

'start' | 'center' | 'end'