Text

Basic

Types, colors, headings, formatting combinations, and ellipsis modes:

Loading preview

Shiny

The shimmer sweeps the text only — icons, chips, and other non-text children keep their own paint. A row that shimmers several separate spans adds textGroupStyles.shinyGroup, which hands every span the same row-wide sweep so they read as one continuous wave rather than one sweep per span:

Loading preview

APIs

Text

Property	Type	Default	Description
align	'left' | 'center' | 'right'	-	Text alignment.
as	ElementType	'div'	Rendered element. Heading variants h1–h5 and p apply matching typographic styles.
classNames	TextClassNames	-	Semantic class slots, { root }.
styles	TextStyles	-	Semantic style slots, { root }.
code	boolean	-	Monospace code font.
color	string	-	Custom text color.
delete	boolean	-	Strikethrough text.
disabled	boolean	-	Disabled text color and cursor.
ellipsis	boolean | { rows?: number; tooltip?: boolean | string | TooltipProps; tooltipWhenOverflow?: boolean }	-	Single-line ellipsis with true; multi-line clamp via rows. tooltip shows the full content on hover; tooltipWhenOverflow gates the tooltip on actual overflow detection.
fontSize	number | string	-	Font size.
italic	boolean	-	Italic text.
lineClamp	number	-	Clamp lines with CSS line-clamp. Ignored when ellipsis is provided.
lineHeight	CSSProperties['lineHeight']	-	Line height.
mark	boolean	-	Highlighted text.
noWrap	boolean	-	white-space: nowrap. Ignored when multi-line ellipsis is enabled.
ref	Ref<HTMLDivElement>	-	Forwarded to the root element.
shiny	boolean	-	Looping shimmer sweep for loading or streaming text. Falls back to a static color when prefers-reduced-motion is set.
shinyDuration	CSSProperties['animationDuration']	'1.5s'	Sweep cycle length. Only accepted when shiny is set.

textGroupStyles

| Class | Description | | --- | --- | --- | --- | | shinyGroup | Put it on a row that contains several textStyles.shiny spans: the row becomes the sweep's coordinate space, so every span shares one continuous wave. | | strong | boolean | - | Bold text. | | textDecoration | CSSProperties['textDecoration'] | - | Text decoration. | | textTransform | CSSProperties['textTransform'] | - | Text transform. | | type | 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' | - | Semantic text color. | | underline | boolean | - | Underlined text. | | weight | 'bold' \| 'bolder' \| number | - | Font weight. | | whiteSpace | CSSProperties['whiteSpace'] | - | White space handling. | | wordBreak | CSSProperties['wordBreak'] | - | Word break behavior. |

Additionally, Text accepts all native HTML attributes of the rendered element through rest props.