SParagraph <s-paragraph>

A block of body text. SParagraph is the typed Vue 3 wrapper for Shopify's Polaris <s-paragraph> web component.

import { SParagraph } from 'polaris-vue-elements'

Best practices

• Keep paragraphs short. Aim for two to four sentences in plain language without jargon. Merchants tend to scan, so split long content into smaller pieces.
• Use tone to signal intent. tone="critical" suits errors, "caution" warnings and "success" confirmations. Always back the color with clear wording rather than relying on it alone.
• Design for accessibility. Add screen-reader-only text (accessibilityVisibility="exclusive") for context that sighted merchants pick up from layout or icons, and make sure toned text keeps enough contrast to read.
• Clamp lines with care. lineClamp helps in tight spots like cards or previews, but never let truncation hide critical information.

See Shopify's best practices for <s-paragraph> for the full guidance.

Example

Default paragraph text, used for the bulk of body copy.A subdued paragraph, useful for secondary or helper text.A critical paragraph, useful for inline error copy. A long paragraph that demonstrates lineClamp truncating its content after a fixed number of lines instead of wrapping indefinitely down the page.

<script setup>
import { SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SParagraph>Default paragraph text, used for the bulk of body copy.</SParagraph>
  <SParagraph color="subdued">A subdued paragraph, useful for secondary or helper text.</SParagraph>
  <SParagraph tone="critical">A critical paragraph, useful for inline error copy.</SParagraph>
  <SParagraph :lineClamp="2" style="max-width: 280px">
    A long paragraph that demonstrates lineClamp truncating its content after a fixed
    number of lines instead of wrapping indefinitely down the page.
  </SParagraph>
</template>

Props

Prop	Type	Description
accessibilityVisibility	"visible" | "hidden" | "exclusive"	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	"subdued" | "base"	Modify the color to be more or less intense.
dir	"auto" | "ltr" | "rtl"	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)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Font size of the paragraph. The named values also apply their matching line-height and letter-spacing.
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	Set the numeric properties of the font.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Font weight of the paragraph.
lineClamp	number	Truncates the text content to the specified number of lines.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	The semantic tone that's applied to the paragraph text, which changes its color to convey meaning. - info: Informational content or helpful tips (blue). - success: Positive outcomes or successful states (green). - warning: Important warnings about potential issues (orange). - critical: Urgent problems or destructive actions (red). - caution: Advisory notices that need attention (yellow).

Slots

Slot	Description
default	The paragraph text content displayed within the paragraph component, which presents a block of related text with appropriate styling.