Text

Text renders body copy in Mosaic. It renders as a <p> by default, forwards a ref to the underlying element, and themes its font-size and color through the size and color variants. Use the render prop when the copy belongs in a different element, such as a <span> inline.

Playground

Props

Prop	Type	Default	Value
size	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'`	`'sm'`
color	`'primary' \| 'neutral' \| 'warning' \| 'negative' \| 'positive'`	`'primary'`
render	`(props) => ReactNode`	—	—
className	`string`	—	—
style	`CSSProperties`	—	—

Usage

import { Text } from '@clerk/ui/mosaic/components/text';

<Text
  size='sm'
  color='primary'
>
  This is a paragraph of body text.
</Text>

Examples

Sizes

Extra small text

Small text

Base text

Large text

Extra large text

2XL text

Colors

Primary text

Neutral text

Warning text

Negative text

Positive text