Skip to main content

Text

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

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.

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

Changes the visual appearance

Use to emphasize a word or a group of words.

string

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

Size of the text

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;

Was this section helpful?

Basic Text

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

Preview

ValueDescription
"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?

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