Text

Displays text with a style from the theme's type scale.

Category: Layout and structure
API status: Stable
Compose APIs: Text, MaterialTheme.typography, TextStyle
Interactive page: https://m3e.ljzapps.app/#components/text

When to use

Pick a style from MaterialTheme.typography instead of setting font size and weight by hand. The style carries size, line height, letter spacing and weight together and follows theme changes.

Use the emphasized variants to mark selected or important text without changing its size.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Type scale in use

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("Headline", style = MaterialTheme.typography.headlineMedium)
    Text("Emphasized title", style = MaterialTheme.typography.titleLargeEmphasized)
    Text("Body text uses the body styles for paragraphs.", style = MaterialTheme.typography.bodyLarge)
    Text("LABEL", style = MaterialTheme.typography.labelMedium, color = MaterialTheme.colorScheme.primary)
}

Parameters

Name	Type	Default	Description
`text`	`String \| AnnotatedString`		The content.
`style`	`TextStyle`	`LocalTextStyle.current`	Take it from MaterialTheme.typography.
`color`	`Color`	`Color.Unspecified`	Defaults to the content color of the surface.
`maxLines / overflow`	`Int / TextOverflow`	`Int.MAX_VALUE / Clip`	Limit and truncate long text.

Guidelines

Do:

Use theme styles.
Limit line length to about 70 characters.

Don't:

Do not hardcode sp values.
Do not use color alone to convey meaning.

Accessibility

Text scales with the user's font size setting. Do not clip it with fixed heights.
Use real heading semantics for section titles so screen readers can navigate by heading.

Related components

List
Card