Paragraph

Paragraphs are lines or blocks of text.

Code

Usage

import { Paragraph } from "@twilio-labs/match/components";
const Component = () => <Paragraph>Ahoy, world!</Paragraph>;

Props

PropTypeDefaultDescription
variant?ParagraphVariant'medium''small', 'medium', 'large', 'xLarge', 'xSmall'
color?TextColornull'primary', 'secondary', 'tertiary', 'inversePrimary', 'inherit'
textAlign?string'left''center', 'left'

Also supports margin props.


Guidelines

About Paragraphs

Paragraphs are blocks of thematically related text typically distinguished from adjacent content with margins.

Accessibility

Paragraph text should be visually distinct and legible. Text color should always meet AA accessibility standard (4.5:1). Use vertical margins to distinguish sequential Paragraphs.


Composition

Most of the text blocks on a page will use Paragraphs. Paragraphs provide legible defaults for font size, line height and color.

Do

Keep paragraph line lengths around 50-75 characters.

Don't

Let paragraphs take up the full width of the page or wrap too much.

Do

Use sentence case but add visual hierarchy with color, font weight, and size.

Don't

Avoid using all caps. Text in all caps is harder to read for all users, but especially for some with disabilities.

Do

Focus on what your user really needs to know. Use bullets when listing items instead of listing in a paragraph.

Don't

Avoid multiple paragraphs of text. UI content should be clear and concise.


Examples

Variants

Inverse