Text Preview
The text component codifies Fluent's opinions on typography to make them easy to use and standardize across products.
Use the text component for plain text. For hypertext, try a link instead.
Loading...
Properties
align
Aligns text based on the parent container.
“center”
“start”
“justify”
“end”
Default:
“start”
as
“h1”
“h2”
“h3”
“h4”
“h5”
“h6”
“p”
“pre”
“span”
Default:
noneblock
Applies a block display for the content.
boolean
Default:
false
font
Applies the font family to the content.
“base”
“numeric”
“monospace”
Default:
“base”
italic
Applies the italic font style to the content.
boolean
Default:
false
size
Applies font size and line height based on the theme typography tokens.
100
200
300
400
500
600
700
800
900
1000
Default:
300
strikethrough
Applies the strikethrough text decoration to the content.
boolean
Default:
false
truncate
Truncate overflowing text for block displays.
boolean
Default:
false
underline
Applies the underline text decoration to the content.
boolean
Default:
false
weight
Applies font weight to the content.
“medium”
“regular”
“semibold”
“bold”
Default:
“regular”
wrap
Wraps the text content on white spaces.
boolean
Default:
false