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 />;
}
JS
import {extend, Separator} from '@shopify/post-purchase-ui-extensions';
extend('Checkout::PostPurchase::Render', (root) => {
const separator = root.createComponent(Separator);
root.appendChild(separator);
});React
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?