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

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

render('Checkout::Dynamic::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
import {extend, TextBlock, BlockStack} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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);
});

```


## TextBlockProps

### TextBlockProps

### size
Size of the text
### emphasis
Use to emphasize a word or a group of words.
### appearance
Changes the visual appearance
### inlineAlignment
Align text along the main axis.
### id
A unique identifier for the component.
### TextSize

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

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
### Emphasis
Use to emphasize a word or a group of words.
'italic' | 'bold'
### Appearance

'accent' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
### InlineAlignment

'start' | 'center' | 'end'
## Related
- [Heading](heading)
- [HeadingGroup](headinggroup)
- [Text](text)