Text

Use text component to present your design and content as clearly and efficiently as possible.

The typeface will not be automatically loaded by Sonnat-UI. The developer is responsible for loading all the fonts used in their application.

Headings

Heading Display 1Heading Display 2Heading Display 3Heading Display 4Heading Display 5Heading Display 6

Subtitles

Subtitle: The evil rabbit jumps over the fenceSmall Subtitle: The evil rabbit jumps over the fence

Paragraphs (body)

Body: func is a modern command line framework that is lighter and more elegant compared with other products, with more scaffolding support and an excellent developer experience at the same time.Small Body: func is a modern command line framework that is lighter and more elegant compared with other products, with more scaffolding support and an excellent developer experience at the same time.

Captions

Caption: Piet Mondrian and Pétro (Nelly) van Doesburg in Mondrian's Paris studio, 1923Small Caption: Piet Mondrian and Pétro (Nelly) van Doesburg in Mondrian's Paris studio, 1923

Access Variants via Theme

In some situations you might not be able to use the <Text /> component. Hopefully, you might be able to take advantage of the theme.typography.variants key.

Separate the Semantics from the Style

It’s important to realize that the style of a typography is independent from the semantic underlying element. Don't skip heading levels. In order to solve this problem, you need to separate the semantics from the style.
You can change the text element's semantic with the as property:

Heading Display 1

API

Learn more about the properties and the customization points.

Usage

import Text from "@sonnat/ui/Text";

//or
import { value Text } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Text Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
noWrap	boolean	false	If `true`, the text will not wrap, but instead will truncate or clip based on the `textOverflow` prop provided. Note that text overflow can only happen when the element has a width in order to overflow.
color	"inherit" \| "textPrimary" \| "textSecondary" \| "textHint" \| "textDisabled" \| "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info"	"inherit"	The color of the text.
variant	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "subtitle" \| "subtitleSmall" \| "body" \| "bodySmall" \| "caption" \| "captionSmall"		Applies the theme typography styles.
align	"initial" \| "inherit" \| "left" \| "right" \| "center" \| "justify"		Set the text-align on the text.
display	"initial" \| "block" \| "inline" \| "inline-block" \| "flex" \| "inline-flex"	"initial"	Set the display on the text.
textOverflow	"clip" \| "ellipsis"	"ellipsis"	Set the text-overflow on the text.
weight	"bold" \| "medium" \| "regular" \| "light"	-	Set the font-weight on the text.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.