TextBlock
TextBlock is used to render a block of text that occupies the full width available. Usually used to render paragraphs or text.
Anchor to ExampleExample

import {extend, TextBlock} from '@shopify/post-purchase-ui-extensions';
extend('Checkout::PostPurchase::Render', (root) => {
const textBlock = root.createComponent(TextBlock, undefined, 'Textblock');
root.appendChild(textBlock);
});
import {render, TextBlock} from '@shopify/post-purchase-ui-extensions-react';
render('Checkout::PostPurchase::Render', () => <App />);
function App() {
return <TextBlock>TextBlock</TextBlock>;
}
JS
import {extend, TextBlock} from '@shopify/post-purchase-ui-extensions';
extend('Checkout::PostPurchase::Render', (root) => {
const textBlock = root.createComponent(TextBlock, undefined, 'Textblock');
root.appendChild(textBlock);
});React
import {render, TextBlock} from '@shopify/post-purchase-ui-extensions-react';
render('Checkout::PostPurchase::Render', () => <App />);
function App() {
return <TextBlock>TextBlock</TextBlock>;
}Anchor to PropsProps
optional = ?
| Name | Type | Description |
|---|---|---|
| size? | "auto" | "fill" | number | Size of the text |
| emphasized? | boolean | |
| subdued? | boolean | |
| id? | string | Unique identifier |
| appearance? | "critical" | "warning" | "success" | Changes the visual appearance |
Was this page helpful?