Text

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

Anchor to ExampleExample

import {extend, Text} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const text = root.createComponent(Text, undefined, 'Text');

root.appendChild(text);

});

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

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return <Text>Text</Text>;

}

import {extend, Text} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const text = root.createComponent(Text, undefined, 'Text');

  root.appendChild(text);
});

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

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return <Text>Text</Text>;
}

Anchor to PropsProps

optional = ?

Name	Type	Description
size?	`"auto" \| "fill" \| number`	Size of the text
emphasized?	`boolean`
subdued?	`boolean`
role?	`"address" \| "deletion" \| AbbreviationRoleType \| DirectionalOverrideRoleType \| DatetimeRoleType`	Assign semantic value
id?	`string`	Unique identifier. Typically used as a target for another component's controls to associate an accessible label with an action.
appearance?	`"critical" \| "warning" \| "success"`	Changes the visual appearance

Anchor to DatetimeRoleTypeDatetimeRoleType

Indicate the text is a date, a time or a duration. Use the "machineReadable" option to help browsers, tools or software understand the human-readable date. Valid format for "machineReadable" can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#Valid_datetime_Values

Name	Type	Description
type	`"datetime"`
machineReadable?	`string`

Anchor to DirectionalOverrideRoleTypeDirectionalOverrideRoleType

Override the text directionality. Typically used for email and phone numbers.

Name	Type	Description
type	`"directional-override"`
direction	`"ltr" \| "rtl"`

Anchor to AbbreviationRoleTypeAbbreviationRoleType

Indicate the text is an abbreviation or acronym. Use the "for" option to provide a description of the abbreviation.

Name	Type	Description
type	`"abbreviation"`
for?	`string`

Was this page helpful?