Choose a version:

Text

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

Anchor to textpropsTextProps

Anchor to size size: Size of the text
Anchor to emphasis emphasis: Use to emphasize a word or a group of words.
Anchor to accessibilityRole accessibilityRole: Set the semantic of the component’s content
Anchor to id id string: Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.
Anchor to appearance appearance Extract< , 'accent' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' >: Changes the visual appearance
Anchor to 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;
Anchor to 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.

TextProps

size
Size of the text
```
TextSize
```
emphasis
Use to emphasize a word or a group of words.
```
Emphasis
```
accessibilityRole
Set the semantic of the component’s content
```
TextAccessibilityRole
```
id
Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.
```
string
```

appearance

Changes the visual appearance

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

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;
```
Visibility
```
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.
```
AccessibilityVisibility
```

export interface TextProps extends VisibilityProps {
  /**
   * Size of the text
   */
  size?: TextSize;
  /**
   * Use to emphasize a word or a group of words.
   */
  emphasis?: Emphasis;
  /**
   * Set the semantic of the component’s content
   */
  accessibilityRole?: TextAccessibilityRole;
  /**
   * Unique identifier. Typically used as a target for another component’s controls
   * to associate an accessible label with an action.
   */
  id?: string;
  /**
   * Changes the visual appearance
   */
  appearance?: Extract<
    Appearance,
    'accent' | 'subdued' | 'info' | 'success' | 'warning' | 'critical'
  >;
}

Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'

Emphasis

Use to emphasize a word or a group of words.

'italic' | 'bold'

TextAccessibilityRole

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

Appearance

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

Visibility

'hidden'

AccessibilityVisibility

'hidden'

Was this section helpful?

Basic Text

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

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

function Extension() {

return (

<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>

);

}

examples

Basic Text

React

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

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

Anchor to appearanceAppearance

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.

Was this section helpful?

Anchor to best-practicesBest 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.

Was this section helpful?

Anchor to relatedRelated

ComponentHeading

ComponentHeadingGroup

ComponentTextBlock