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

# Text

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

## TextProps

* size

  TextSize

  Size of the text

* emphasis

  Emphasis

  Use to emphasize a word or a group of words.

* accessibilityRole

  TextAccessibilityRole

  Set the semantic of the component’s content

* id

  string

  Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.

* appearance

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

  Changes the visual appearance

* visibility

  Visibility

  Changes the visibility of the element.

  `hidden` visually hides the component while keeping it accessible to assistive technology, such as screen readers. Hidden elements don't take any visual space contrary to CSS visibility: hidden;

* accessibilityVisibility

  AccessibilityVisibility

  Changes the visibility of the element to assistive technologies.

  `hidden` hides the component from assistive technology (for example, a screen reader) but remains visually visible.

### 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'
```

### TextAccessibilityRole

```ts
'address' | 'deletion' | 'marking' | {type: 'abbreviation'; for?: string} | {type: 'directional-override'; direction: 'ltr' | 'rtl'} | {type: 'datetime'; machineReadable?: string} | 'stress' | 'offset' | 'strong'
```

### Appearance

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

### Visibility

```ts
'hidden'
```

### AccessibilityVisibility

```ts
'hidden'
```

### Examples

* #### Basic Text

  ##### React

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

  render('Checkout::Dynamic::Render', () => <Extension />);

  function Extension() {
    return (
      <BlockStack inlineAlignment="center">
        <Text size="extraSmall">Total</Text>
        <Text size="small">Total</Text>
        <Text size="base">Total</Text>
        <Text size="medium">Total</Text>
        <Text size="large">Total</Text>
        <Text size="extraLarge">Total</Text>
      </BlockStack>
    );
  }
  ```

  ##### JS

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

  extend('Checkout::Dynamic::Render', (root) => {
    const text = root.createComponent(BlockStack, undefined, [
      root.createComponent(Text, {size: 'extraSmall'}, 'Total'),
      root.createComponent(Text, {size: 'small'}, 'Total'),
      root.createComponent(Text, {size: 'base'}, 'Total'),
      root.createComponent(Text, {size: 'medium'}, 'Total'),
      root.createComponent(Text, {size: 'large'}, 'Total'),
      root.createComponent(Text, {size: 'extraLarge'}, 'Total'),
    ]);

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/text-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

* Use larger text to emphasize content that’s not a heading, such as a price total.

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

## Related

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/heading)

[ComponentHeading](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/heading)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/headinggroup)

[ComponentHeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/headinggroup)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/textblock)

[ComponentTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/textblock)