Paragraph

Paragraph is a block of body text.

Stable
Show details
Stable
Published: July 30, 2026
Updated: September 02, 2026

Use Paragraph for standalone blocks of text that are semantically paragraphs.

A paragraph is defined by its role in the content, not by its length. It does not need to be long. A single sentence (even just a few words), short description, or brief piece of supporting text, can still be a paragraph when it forms a distinct block of content.

The component renders a semantic HTML <p> element and removes the browser’s default paragraph margins. This allows spacing to be controlled by the surrounding layout rather than by implicit browser styles.

Do not use a div for paragraph text

Do not use a <div> solely to avoid the default margins applied to a <p> element.


Variants

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

Paragraph
Property Values Default
size Variant large | medium | small | xSmall large
color Variant primary | secondary primary
✏️ content Text string A paragraph is a block of body text.
Paragraph
size large color primary
Paragraph
size large color secondary
Paragraph
size medium color primary
Paragraph
size medium color secondary
Paragraph
size small color primary
Paragraph
size small color secondary
Paragraph
size xSmall color primary
Paragraph
size xSmall color secondary

Help and support