Text is used to visually style and provide semantic value for a small piece of text content. --- ### Example ![text](/assets/api/checkout-extensions/post-purchase/components/text.png) ```ts?title: "JS" import {extend, Text} from '@shopify/post-purchase-ui-extensions'; extend('Checkout::PostPurchase::Render', (root) => { const text = root.createComponent(Text, undefined, 'Text'); root.appendChild(text); }); ``` ```tsx?title: "React" import {render, Text} from '@shopify/post-purchase-ui-extensions-react'; render('Checkout::PostPurchase::Render', () => ); function App() { return Text; } ``` ## Props 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 | ### DatetimeRoleType 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 | | ### DirectionalOverrideRoleType Override the text directionality. Typically used for email and phone numbers. | Name | Type | Description | | --- | --- | --- | | type | "directional-override" | | | direction | "ltr" | "rtl" | | ### AbbreviationRoleType 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 | |