# TextBlock

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

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

```

## TextBlockProps

### TextBlockProps

### size

value: `TextSize`

  - TextSize: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'
  - Size: 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
Size of the text

### emphasis

value: `Emphasis`

  - Emphasis: 'italic' | 'bold'
Use to emphasize a word or a group of words.

### appearance

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

  - Appearance: 'accent' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
Changes the visual appearance

### inlineAlignment

value: `InlineAlignment`

  - InlineAlignment: 'start' | 'center' | 'end'
Align text along the main axis.

### id

value: `string`

A unique identifier for the component.

## Related

- [Heading](heading)
- [HeadingGroup](headinggroup)
- [Text](text)