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>;

}

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>;
}

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?