---
title: TextBlock
description: >-
  TextBlock is used to render a block of text that occupies the full width
  available.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/textblock
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/textblock.md
---

# TextBlock

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

***

### Example

![textblock](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/textblock-CSoHv3go.png)

##### JS

```ts
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

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

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

function App() {
  return <TextBlock>TextBlock</TextBlock>;
}
```

***

## Props

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 |

***