---
title: Text
description: 'This component renders text. Remember, you can also add your own styling.'
api_version: 2025-04
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2025-04/components/titles-and-text/text
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2025-04/components/titles-and-text/text.md
---

# Text

This component renders text. Remember, you can also add your own styling.

## TextProps

* accessibilityRole

  TextAccessibilityRole

  Provide semantic meaning to content and improve support for assistive technologies.

* fontStyle

  FontStyle

  Use to emphasize a word or a group of words.

* fontVariant

  FontVariantOptions | FontVariantOptions\[]

  Set all the variants for a font with a shorthand property.

* fontWeight

  FontWeight

  Sets the weight (or boldness) of the font.

* id

  string

  A unique identifier for the field.

* textOverflow

  TextOverflow

  Set how hidden overflow content is signaled to users.

### TextAccessibilityRole

```ts
'address' | 'deletion' | 'mark' | 'emphasis' | 'offset' | 'strong'
```

### FontStyle

```ts
'italic' | 'normal'
```

### FontVariantOptions

```ts
'numeric' | 'all-small-caps' | 'none'
```

### FontWeight

```ts
'light-300' | 'light-200' | 'light-100' | 'light' | 'base' | 'normal' | 'bold' | 'bold-100' | 'bold-200' | 'bold-300'
```

### TextOverflow

```ts
'ellipsis'
```

### Examples

* #### Simple Text example

  ##### React

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

  render('Playground', () => <App />);

  function App() {
    return (
      <BlockStack inlineAlignment="center" gap>
        <Text fontWeight="bold">Name:</Text>
        <Text>Jane Doe</Text>
      </BlockStack>
    );
  }
  ```

  ##### JS

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

  extend('Playground', (root) => {
    const text = root.createComponent(BlockStack, {inlineAlignment: 'center', gap: true}, [
      root.createComponent(Text, {fontWeight: 'bold'}, 'Name:'),
      root.createComponent(Text, {}, 'Jane Doe'),
    ]);

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2025-04/text-default.png)

## Related

[- Heading](https://shopify.dev/docs/api/admin-extensions/components/titles-and-text/heading)