Choose a version:

Text

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

Anchor to textpropsTextProps

Anchor to accessibilityRole accessibilityRole: Provide semantic meaning to content and improve support for assistive technologies.
Anchor to fontStyle fontStyle: Use to emphasize a word or a group of words.
Anchor to fontVariant fontVariant | []: Set all the variants for a font with a shorthand property.
Anchor to fontWeight fontWeight: Sets the weight (or boldness) of the font.
Anchor to id id string: A unique identifier for the field.
Anchor to textOverflow textOverflow: Set how hidden overflow content is signaled to users.

TextProps

accessibilityRole
Provide semantic meaning to content and improve support for assistive technologies.
```
TextAccessibilityRole
```
fontStyle
Use to emphasize a word or a group of words.
```
FontStyle
```
fontVariant
Set all the variants for a font with a shorthand property.
```
FontVariantOptions | FontVariantOptions[]
```
fontWeight
Sets the weight (or boldness) of the font.
```
FontWeight
```
id
A unique identifier for the field.
```
string
```
textOverflow
Set how hidden overflow content is signaled to users.
```
TextOverflow
```

export interface TextProps {
  /** A unique identifier for the field. */
  id?: string;

  /**
   * Sets the weight (or boldness) of the font.
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
   * */
  fontWeight?: FontWeight;

  /**
   * Set how hidden overflow content is signaled to users.
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
   * */
  textOverflow?: TextOverflow;

  /**
   * Set all the variants for a font with a shorthand property.
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
   */
  fontVariant?: FontVariantOptions | FontVariantOptions[];

  /**
   *  Use to emphasize a word or a group of words.
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
   */
  fontStyle?: FontStyle;

  /**
   * Provide semantic meaning to content and improve support for assistive technologies.
   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
   */
  accessibilityRole?: TextAccessibilityRole;
}

TextAccessibilityRole

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

FontStyle

'italic' | 'normal'

FontVariantOptions

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

FontWeight

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

TextOverflow

'ellipsis'

Was this section helpful?

Simple Text example

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

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

function App() {

return (

</BlockStack>

);

}

examples

Simple Text example

React

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

Preview

Anchor to relatedRelated

Heading