Back to Primitives

Paragraph

1:1Typography
View on GitHub

Block-level text.

Example
Manage your products, inventory, and pricing all in one place.
Usage
import { Paragraph } from '@/components/polaris';

function Example() {
    return (
        <Paragraph>
            Manage your products, inventory, and pricing all in one place.
        </Paragraph>
    );
}
Component Source
import { forwardRef, createElement } from 'react';

type Props = JSX.IntrinsicElements['s-paragraph'];

/**
 * Paragraph component - block of body text.
 *
 * @example
 * <Paragraph>Manage your products and inventory.</Paragraph>
 */
export const Paragraph = forwardRef<HTMLElement, Props>((props, ref) =>
    createElement('s-paragraph', { ref, ...props })
);

Paragraph.displayName = 'Paragraph';