Skip to main content

Text

This component renders text. Remember, you can also add your own styling.

Provide semantic meaning to content and improve support for assistive technologies.

Use to emphasize a word or a group of words.

| []

Set all the variants for a font with a shorthand property.

Sets the weight (or boldness) of the font.

string

A unique identifier for the field.

Set how hidden overflow content is signaled to users.

Was this section helpful?

Simple Text example

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

render('Playground', () => <App />);

function App() {
return (
<BlockStack inlineAlignment="center" gap>
<Text fontWeight="bold">Name:</Text>
<Text>Jane Doe</Text>
</BlockStack>
);
}

Preview