# Text

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

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

```

## TextProps

### TextProps

### id

value: `string`

A unique identifier for the field.

### fontWeight

value: `FontWeight`

  - FontWeight: 'light-300' | 'light-200' | 'light-100' | 'light' | 'base' | 'normal' | 'bold' | 'bold-100' | 'bold-200' | 'bold-300'
Sets the weight (or boldness) of the font.

### textOverflow

value: `TextOverflow`

  - TextOverflow: 'ellipsis'
Set how hidden overflow content is signaled to users.

### fontVariant

value: `FontVariantOptions | FontVariantOptions[]`

  - FontVariantOptions: 'numeric' | 'all-small-caps' | 'none'
Set all the variants for a font with a shorthand property.

### fontStyle

value: `FontStyle`

  - FontStyle: 'italic' | 'normal'
Use to emphasize a word or a group of words.

### accessibilityRole

value: `TextAccessibilityRole`

  - TextAccessibilityRole: 'address' | 'deletion' | 'mark' | 'emphasis' | 'offset' | 'strong'
Provide semantic meaning to content and improve support for assistive technologies.

## Related

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