Hopper

Paragraph

A paragraph is used to render blocks of text.

View sourceView on npmReport an issue
AI Tip Want to skip the docs? Use the MCP Server

Usage

Sizes

You can alter the size of the paragraph by specifying a size prop. The available sizes match the Hopper Typography Type Scale — a type scale is a set of font-size and line-height pairs.

Inherit

You can also alter the size to match the parent element's type scale by using the inherit size.

Props

style?
className?
render?

Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.

Requirements:

  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
size?

The Typography Type Scale to use.

Defaults to md.