Separator

Separators create visual separation between sections of an interface.

Anchor to ExampleExample

import {extend, Separator} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const separator = root.createComponent(Separator);

root.appendChild(separator);

});

import {render, Separator} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return <Separator />;

}

import {extend, Separator} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const separator = root.createComponent(Separator);

  root.appendChild(separator);
});

import {render, Separator} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return <Separator />;
}

Anchor to PropsProps

optional = ?

Name	Type	Description
width?	`"thin" \| "medium" \| "thick" \| "xthick"`
direction?	`"horizontal" \| "vertical"`

Was this page helpful?