Choose a version:

Text

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

Support

Targets (50)

Supported targets

Checkout::Actions::RenderBefore
Checkout::CartLineDetails::RenderAfter
Checkout::CartLines::RenderAfter
Checkout::Contact::RenderAfter
Checkout::CustomerInformation::RenderAfter
Checkout::DeliveryAddress::RenderBefore
Checkout::Dynamic::Render
Checkout::PickupLocations::RenderAfter
Checkout::PickupLocations::RenderBefore
Checkout::PickupPoints::RenderAfter
Checkout::PickupPoints::RenderBefore
Checkout::Reductions::RenderAfter
Checkout::Reductions::RenderBefore
Checkout::ShippingMethodDetails::RenderAfter
Checkout::ShippingMethodDetails::RenderExpanded
Checkout::ShippingMethods::RenderAfter
Checkout::ShippingMethods::RenderBefore
Checkout::ThankYou::CartLineDetails::RenderAfter
Checkout::ThankYou::CartLines::RenderAfter
Checkout::ThankYou::CustomerInformation::RenderAfter
Checkout::ThankYou::Dynamic::Render
purchase.checkout.actions.render-before
purchase.checkout.block.render
purchase.checkout.cart-line-item.render-after
purchase.checkout.cart-line-list.render-after
purchase.checkout.contact.render-after
purchase.checkout.delivery-address.render-after
purchase.checkout.delivery-address.render-before
purchase.checkout.footer.render-after
purchase.checkout.header.render-after
purchase.checkout.payment-method-list.render-after
purchase.checkout.payment-method-list.render-before
purchase.checkout.pickup-location-list.render-after
purchase.checkout.pickup-location-list.render-before
purchase.checkout.pickup-location-option-item.render-after
purchase.checkout.pickup-point-list.render-after
purchase.checkout.pickup-point-list.render-before
purchase.checkout.reductions.render-after
purchase.checkout.reductions.render-before
purchase.checkout.shipping-option-item.details.render
purchase.checkout.shipping-option-item.render-after
purchase.checkout.shipping-option-list.render-after
purchase.checkout.shipping-option-list.render-before
purchase.thank-you.announcement.render
purchase.thank-you.block.render
purchase.thank-you.cart-line-item.render-after
purchase.thank-you.cart-line-list.render-after
purchase.thank-you.customer-information.render-after
purchase.thank-you.footer.render-after
purchase.thank-you.header.render-after

Anchor to TextPropsTextProps

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

Anchor to accessibilityRole accessibilityRole: Set the semantic of the component’s content
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.
Anchor to appearance appearance 'subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical': Changes the visual appearance
Anchor to emphasis emphasis: Use to emphasize a word or a group of words.
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 size size: Size of the text
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;

TextAccessibilityRole

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

AccessibilityVisibility

'hidden'

Emphasis

Use to emphasize a word or a group of words.

'italic' | 'bold'

Size

A keyword that maps to a predefined size from the design system's size scale. Components use a subset of these values depending on which sizes they support. - `extraSmall`: The smallest available size. - `small`: A compact size, smaller than the default. - `base`: The default size, appropriate for most contexts. - `large`: A larger size for increased visual prominence. - `extraLarge`: The largest available keyword size. - `fill`: Stretches to fill the available space in the container.

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

Visibility

'hidden'

Anchor to ExamplesExamples

Anchor to Basic TextBasic Text

Basic Text

Basic Text

import {

reactExtension,

Text,

BlockStack,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.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>

);

}

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

});

React

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

JS

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

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.

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.