Text

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

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

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

function Extension() {
  return (
    
      Total
      Total
      Total
      Total
      Total
      Total
    
  );
}

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

TextProps

TextProps

size

Size of the text

emphasis

Use to emphasize a word or a group of words.

accessibilityRole

Set the semantic of the component’s content

id

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

appearance

Changes the visual appearance

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

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

Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'

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'

Related

• Heading
• HeadingGroup
• TextBlock