---
title: Paragraph
description: Displays a block of text and can contain inline elements such as buttons, links, or emphasized text. Use to present standalone blocks of content as opposed to inline text.
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/paragraph
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/paragraph.md
---

# Paragraph

Displays a block of text and can contain inline elements such as buttons, links, or emphasized text. Use to present standalone blocks of content as opposed to inline text.

## Properties

* **accessibilityVisibility**

  **'visible' | 'hidden' | 'exclusive'**

  **Default: 'visible'**

  Changes the visibility of the element.

  * `visible`: the element is visible to all users.
  * `hidden`: the element is removed from the accessibility tree but remains visible.
  * `exclusive`: the element is visually hidden but remains in the accessibility tree.

* **color**

  **'base' | 'subdued'**

  **Default: 'base'**

  Modify the color to be more or less intense.

* **dir**

  **'ltr' | 'rtl' | 'auto' | ''**

  **Default: ''**

  Indicates the directionality of the element’s text.

  * `ltr`: languages written from left to right (e.g. English)
  * `rtl`: languages written from right to left (e.g. Arabic)
  * `auto`: the user agent determines the direction based on the content
  * `''`: direction is inherited from parent elements (equivalent to not setting the attribute)

* **id**

  **string**

  A unique identifier for the element.

* **lang**

  **string**

  **Default: ''**

  Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)

  It is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.

* **tone**

  **'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'**

  **Default: 'auto'**

  Sets the tone of the component, based on the intention of the information being conveyed.

* **type**

  **ParagraphType**

  **Default: 'paragraph'**

  Provide semantic meaning and default styling to the paragraph.

  Other presentation properties on `s-paragraph` override the default styling.

### ParagraphType

```ts
"paragraph" | "small"
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/paragraph-default-B-syu5wX.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-paragraph>Ship in 1-2 business days.</s-paragraph>
  ```

## Best Practices

* Create contrast between more and less important text with properties such as `color` and `tone`.