Text

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

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

export default reactExtension(
  'purchase.checkout.block.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>
  );
}

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

export default extension('purchase.checkout.block.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

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

Visibility

'hidden'

AccessibilityVisibility

'hidden'

Related

• Heading
• HeadingGroup
• TextBlock