Choose a version:

Paragraph

Use this to display a block of text similar to the <p> tag in HTML.

Anchor to paragraphpropsParagraphProps

Anchor to children children any
Anchor to fontSize fontSize: Size of the typography's font.
Anchor to fontStyle fontStyle: Use to emphasize a word or a group of words.
Anchor to fontWeight fontWeight: Sets the weight of the font.
Anchor to id id string: A unique identifier for the element.
Anchor to textOverflow textOverflow: Set how hidden overflow content is signaled to users.

ParagraphProps

children
```
any
```
fontSize
Size of the typography's font.
```
SizeScale
```
fontStyle
Use to emphasize a word or a group of words.
```
FontStyle
```
fontWeight
Sets the weight of the font.
```
FontWeight
```
id
A unique identifier for the element.
```
string
```
textOverflow
Set how hidden overflow content is signaled to users.
```
TextOverflow
```

export interface ParagraphProps extends BaseTypographyProps, GlobalProps {
  children?: any;
}

SizeScale

'small-300' | 'small-200' | 'small-100' | 'base' | 'large-100' | 'large-200' | 'large-300'

FontStyle

'italic' | 'normal'

FontWeight

'light-300' | 'light-200' | 'light-100' | 'light' | 'base' | 'normal' | 'bold' | 'bold-100' | 'bold-200' | 'bold-300'

TextOverflow

'ellipsis'

Was this section helpful?

Simple Paragraph example

import {

render,

BlockStack,

Paragraph,

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

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

function App() {

return (

</BlockStack>

)

}

examples

Simple Paragraph example

React

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

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

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

JS

import {extend, Paragraph, BlockStack} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const paragraph = root.createComponent(BlockStack, {inlineAlignment: 'center', gap: true}, [
    root.createComponent(Paragraph, {fontWeight: 'bold'}, 'Name:'),
    root.createComponent(Paragraph, {}, 'Jane Doe'),
  ]);

  root.appendChild(paragraph);
});

Preview

Anchor to relatedRelated

Heading