---
title: Text
description: >-
  The `Text` component displays text with specific visual styles or tones. Use
  it to present content with appropriate emphasis, hierarchy, or tone while
  maintaining semantic meaning.


  Text provides flexible styling options that integrate with the POS design
  system while ensuring proper contrast and readability across different
  contexts.


  The component automatically adjusts line length for optimal readability based
  on container width, preventing overly long lines that reduce reading speed and
  comprehension in wider layouts.


  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-components/layout-and-structure/text
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/text.md
---

# Text

The `Text` component displays text with specific visual styles or tones. Use it to present content with appropriate emphasis, hierarchy, or tone while maintaining semantic meaning.

Text provides flexible styling options that integrate with the POS design system while ensuring proper contrast and readability across different contexts.

The component automatically adjusts line length for optimal readability based on container width, preventing overly long lines that reduce reading speed and comprehension in wider layouts.

Text on mobile surfaces is blockish, rather than inline.

## Properties

Configure the following properties on the `Text` component.

* color

  ColorKeyword

  Default: 'base'

  The color intensity of the text. Controls how prominent or subtle the text appears within the interface.

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

* tone

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

  Default: 'auto'

  Determines the visual appearance and semantic meaning of the text. Available options:

  * `'auto'` - Lets the system automatically choose the appropriate tone based on context. Use when you want the system to determine the most appropriate styling.
  * `'neutral'` - Gray styling for general status information that doesn't require emphasis. Use for general status updates and standard information.
  * `'info'` - Blue styling for informational content and neutral updates. Use for informational content that provides helpful context.
  * `'success'` - Green styling for positive states, completed actions, and successful operations. Use for positive outcomes and successful processes.
  * `'caution'` - Yellow styling for situations that need attention but aren't urgent. Use for potential issues that require awareness.
  * `'warning'` - Orange styling for important notices that require merchant awareness. Use for situations that need attention but aren't critical.
  * `'critical'` - Red styling for errors, failures, and urgent issues requiring immediate action. Use for urgent issues that need immediate merchant attention.

* type

  'strong' | 'small' | 'generic'

  Default: 'generic'

  The semantic meaning and default styling of the text. Other presentation properties override the default styling provided by the type. Available options:

  * `'generic'` - The default text type for general content without specific semantic meaning or emphasis.
  * `'strong'` - A text type that provides emphasis and importance, typically rendered with increased font weight or visual prominence.
  * `'small'` - A text type for secondary or supplementary content, typically rendered with reduced size for captions, fine print, or less important information.

### ColorKeyword

Defines the available color intensity options for icons. Controls the visual prominence and contrast of icon elements within the interface.

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

## Preview

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

## Best practices

* **Choose semantic types:** Use `strong` for emphasis, `small` for secondary info, `generic` for standard text.
* **Apply appropriate tones:** Use `success` for positive outcomes, `warning` or `critical` for alerts, `info` for helpful context, `auto` for neutral content.
* **Balance color intensity:** Use `strong` for emphasis, `base` for readability, `subdued` for secondary info.
* **Nest for mixed formatting:** Nest `Text` components when you need multiple styles within one text block.

## Limitations

* Text styling is controlled by the POS design system through the provided properties—custom font families, sizes, or styling beyond the available options aren't supported.
* Complex rich text formatting isn't supported—use multiple `Text` components or nested text elements for varied formatting needs.