Choose a version:

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.

Anchor to propertiesProperties

Anchor to accessibilityVisibility 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.
Anchor to color color 'base' | 'subdued': Modify the color to be more or less intense.
Anchor to dir 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)
Anchor to id id string: A unique identifier for the element.
Anchor to lang 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 ("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.
Anchor to tone tone 'custom' | 'success' | 'auto' | 'neutral' | 'info' | 'warning' | 'critical': Sets the tone of the component, based on the intention of the information being conveyed.
Anchor to type type Default: 'paragraph': Provide semantic meaning and default styling to the paragraph.

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

ParagraphProps

accessibilityVisibility
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.
```
'visible' | 'hidden' | 'exclusive'
```
color
Modify the color to be more or less intense.
```
'base' | 'subdued'
```
dir
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)
```
'ltr' | 'rtl' | 'auto' | ''
```
id
A unique identifier for the element.
```
string
```
lang
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.
```
string
```
tone
Sets the tone of the component, based on the intention of the information being conveyed.
```
'custom' | 'success' | 'auto' | 'neutral' | 'info' | 'warning' | 'critical'
```
type
Provide semantic meaning and default styling to the paragraph. Other presentation properties on `s-paragraph` override the default styling.
```
ParagraphType
```

export interface ParagraphProps extends Pick<ParagraphProps$1, 'accessibilityVisibility' | 'color' | 'dir' | 'id' | 'lang' | 'tone' | 'type'> {
    color?: Extract<ParagraphProps$1['color'], 'subdued' | 'base'>;
    tone?: Extract<ParagraphProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'custom'>;
}

ParagraphType

"paragraph" | "small"

Was this section helpful?

Code

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

Preview

Anchor to best-practicesBest Practices

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