Paragraph, meant to represent the paragraph element, is a typography component built on top of Text.

Structure

The Paragraph component renders a native HTML <p> element by default. The <p> element communicates a distinct block of content to assistive technology, allowing screen readers to pause between paragraphs and giving users the ability to navigate by paragraph. While the element can be changed with the inherited as prop, we recommend keeping the default <p> to preserve proper document semantics.

Color and meaning

In many contexts, color may be used to help communicate a certain meaning to the user. However, color should never be the sole indicator of the intended meaning. Not all sighted users experience color the same way.

When using color to communicate status, hierarchy, or importance, always pair it with supporting text or iconography or change typography styles when needed. Text and color should work together to communicate the intended meaning and importance.

On this page