Text

Display text using well-defined typographic styles.

The Happy Bufo laughs.

The Happy Bufo laughs.

The Happy Bufo laughs.

The Happy Bufo laughs.

The Happy Bufo laughs.

The Happy Bufo laughs.

The Happy Bufo laughs.

The Happy Bufo laughs.

Props

Name
Type
Description
Default
children
ReactNode
The content, duh.
-
as
enum
The root element.
p
size
10 | 12 | 14 | 16 | 20 | 24 | 32 | 40 | 48
The font size.
14
lineHeight
12 | 16 | 20 | 24 | 32 | 40 | 48 | 56
The line height.
-
weight
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
The font weight.
-
transform
"capitalize" | "uppercase" | "lowercase" | "initial"
Text transform short hand.
-
align
"left" | "center" | "right"
Text alignment short hand.
-
color
enum
The text color. Strictly limited to colors of the ∆ design system.
geist-foreground
truncate
number | boolean
Truncate a single or multiple line(s). If you pass truncate, make sure to pass title so that the full value is shown on hover.
-
className
string
The root class name.
-
style
CSSProperties
The root element inline stlyes.
-
title
string
If text is `truncated`, this should be the full text.
-
wrap
boolean
Whether the text should wrap lines
true
dangerouslySetInnerHTML
{__html: string}
-

Sizes

Code Editor

Weights

Code Editor

Color

Code Editor

Modifiers

Code Editor

Polymorphic

Code Editor

Truncate

Code Editor

Clamp

Code Editor

Align

Code Editor

Monospace Font

Code Editor

Unordered List

Code Editor

Ordered List

Code Editor

Code

Code Editor

Codeblock

Code Editor