---
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: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/titles-and-text/paragraph
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/titles-and-text/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

* #### Code

  ##### Default

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/paragraph-default.png)

## Best Practices

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