---
title: Text
description: |-
  Displays text with specific visual styles or tones. Use to present content with appropriate emphasis, hierarchy, or tone.
    > Note: Text on mobile surfaces is blockish, rather than inline.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentstitles-and-text/text
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentstitles-and-text/text.md
---

# Text

Displays text with specific visual styles or tones. Use to present content with appropriate emphasis, hierarchy, or tone.

Note

Text on mobile surfaces is blockish, rather than inline.

## Properties

* color

  ColorKeyword

  Default: 'base'

  Modify the color to be more or less intense.

* id

  string

  A unique identifier for the element.

* tone

  \| 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'

  Default: 'auto'

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

* type

  'strong' | 'small' | 'generic'

  Default: 'generic'

  Provide semantic meaning and default styling to the text.

  Other presentation properties on Text override the default styling.

### ColorKeyword

```ts
'subdued' | 'base' | 'strong'
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-text>
    <s-text type="strong">Name:</s-text> Jane Doe
  </s-text>
  ```

## Preview

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