---
title: Text
description: >-
  Text is used to visually style and provide semantic value for a small piece of
  text content.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/text
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/text.md
---

# Text

Text is used to visually style and provide semantic value for a small piece of text content.

***

### Example

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

```ts
import {extend, Text} from '@shopify/post-purchase-ui-extensions';


extend('Checkout::PostPurchase::Render', (root) => {
  const text = root.createComponent(Text, undefined, 'Text');


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

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


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


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

##### JS

```
import {extend, Text} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const text = root.createComponent(Text, undefined, 'Text');

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

##### React

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

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

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

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| size? | `"auto" \| "fill" \| number` | Size of the text |
| emphasized? | `boolean` | |
| subdued? | `boolean` | |
| role? | `"address" \| "deletion" \| AbbreviationRoleType \| DirectionalOverrideRoleType \| DatetimeRoleType` | Assign semantic value |
| id? | `string` | Unique identifier. Typically used as a target for another component's controls to associate an accessible label with an action. |
| appearance? | `"critical" \| "warning" \| "success"` | Changes the visual appearance |

### Datetime​Role​Type

Indicate the text is a date, a time or a duration. Use the "machineReadable" option to help browsers, tools or software understand the human-readable date. Valid format for "machineReadable" can be found here: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#Valid_datetime_Values>

| Name | Type | Description |
| - | - | - |
| type | `"datetime"` | |
| machineReadable? | `string` | |

### Directional​Override​Role​Type

Override the text directionality. Typically used for email and phone numbers.

| Name | Type | Description |
| - | - | - |
| type | `"directional-override"` | |
| direction | `"ltr" \| "rtl"` | |

### Abbreviation​Role​Type

Indicate the text is an abbreviation or acronym. Use the "for" option to provide a description of the abbreviation.

| Name | Type | Description |
| - | - | - |
| type | `"abbreviation"` | |
| for? | `string` | |

***