---
title: TextBlock
description: >-
  Text block is used to render a block of text that occupies the full width
  available, like a paragraph.
api_version: 2023-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/titles-and-text/textblock
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/titles-and-text/textblock.md
---

# Text​Block

Text block is used to render a block of text that occupies the full width available, like a paragraph.

## TextBlockProps

* size

  TextSize

  Size of the text

* emphasis

  Emphasis

  Use to emphasize a word or a group of words.

* appearance

  Extract< Appearance, 'accent' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' >

  Changes the visual appearance

* inlineAlignment

  InlineAlignment

  Align text along the main axis.

* id

  string

  A unique identifier for the component.

### TextSize

```ts
Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'
```

### Size

```ts
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
```

### Emphasis

Use to emphasize a word or a group of words.

```ts
'italic' | 'bold'
```

### Appearance

```ts
'accent' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
```

### InlineAlignment

```ts
'start' | 'center' | 'end'
```

### Examples

* #### Basic TextBlock

  ##### React

  ```tsx
  import {
    reactExtension,
    TextBlock,
    BlockStack,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <BlockStack>
        <TextBlock>
          We have a 30-day return policy, which
          means you have 30 days after receiving
          your item to request a return.
        </TextBlock>
        <TextBlock>
          To be eligible for a return, your item
          must be in the same condition that you
          received it, unworn or unused, with tags,
          and in its original packaging. You’ll also
          need the receipt or proof of purchase.
        </TextBlock>
      </BlockStack>
    );
  }
  ```

  ##### JS

  ```js
  import {
    extension,
    TextBlock,
    BlockStack,
  } from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const textBlock = root.createComponent(BlockStack, undefined, [
      root.createComponent(
        TextBlock,
        undefined,
        'We have a 30-day return policy, which means you have 30 days after receiving your item to request a return.',
      ),
      root.createComponent(
        TextBlock,
        undefined,
        'To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase.',
      ),
    ]);

    root.appendChild(textBlock);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-07/textblock-default.png)

## Appearance

| Value | Description |
| - | - |
| `"accent"` | Conveys emphasis and draws attention to the element. |
| `"subdued"` | Conveys a subdued or disabled state for the element. |
| `"info"` | Conveys that the element is informative or has information. |
| `"success"` | Convey a successful interaction. |
| `"warning"` | Convey something needs attention or an action needs to be taken. |
| `"critical"` | Conveys a problem has arisen. |

## Best Practices

* Create contrast between more and less important text with properties such as `size`, `emphasis`, and `appearance`.

## Related

[Component - Heading](heading)

[Component - HeadingGroup](headinggroup)

[Component - Text](text)