SpanStyle

Styling configuration that applies at the character level.

Use SpanStyle to configure character-level styles such as text color, font size, font family, background color, and text decorations.

For paragraph-level styling (e.g., alignment, line height), see ParagraphStyle.

import androidx.compose.material3.Text
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.sp

Text(
    fontSize = 16.sp,
    text =
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Red)) { append("Hello") }
            withStyle(SpanStyle(color = Color.Blue)) { append(" World") }
        },
)
 
import androidx.compose.material3.Text
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.sp

val brushColors = listOf(Color.Red, Color.Blue, Color.Green, Color.Yellow)
Text(
    fontSize = 16.sp,
    text =
        buildAnnotatedString {
            withStyle(SpanStyle(brush = Brush.radialGradient(brushColors))) { append("Hello") }
            withStyle(SpanStyle(brush = Brush.radialGradient(brushColors.asReversed()))) {
                append(" World")
            }
        },
)
 
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString

buildAnnotatedString {
    append("Hello")
    // push green text style so that any appended text will be green
    pushStyle(SpanStyle(color = Color.Green))
    // append new text, this text will be rendered as green
    append(" World")
    // pop the green style
    pop()
    // append a string without style
    append("!")
    // then style the last added word as red, exclamation mark will be red
    addStyle(SpanStyle(color = Color.Red), "Hello World".length, this.length)

    toAnnotatedString()
}
See also
AnnotatedString
TextStyle
ParagraphStyle

Summary

Public constructors
SpanStyle(
    color: Color,
    fontSize: TextUnit,
    fontWeight: FontWeight?,
    fontStyle: FontStyle?,
    fontSynthesis: FontSynthesis?,
    fontFamily: FontFamily?,
    fontFeatureSettings: String?,
    letterSpacing: TextUnit,
    baselineShift: BaselineShift?,
    textGeometricTransform: TextGeometricTransform?,
    localeList: LocaleList?,
    background: Color,
    textDecoration: TextDecoration?,
    shadow: Shadow?,
    platformStyle: PlatformSpanStyle?,
    drawStyle: DrawStyle?
)

Styling configuration for text spans.
Cmn
SpanStyle(
    brush: Brush?,
    alpha: Float,
    fontSize: TextUnit,
    fontWeight: FontWeight?,
    fontStyle: FontStyle?,
    fontSynthesis: FontSynthesis?,
    fontFamily: FontFamily?,
    fontFeatureSettings: String?,
    letterSpacing: TextUnit,
    baselineShift: BaselineShift?,
    textGeometricTransform: TextGeometricTransform?,
    localeList: LocaleList?,
    background: Color,
    textDecoration: TextDecoration?,
    shadow: Shadow?,
    platformStyle: PlatformSpanStyle?,
    drawStyle: DrawStyle?
)

Styling configuration for text spans.
Cmn

Public functions
SpanStyle
copy(
    color: Color,
    fontSize: TextUnit,
    fontWeight: FontWeight?,
    fontStyle: FontStyle?,
    fontSynthesis: FontSynthesis?,
    fontFamily: FontFamily?,
    fontFeatureSettings: String?,
    letterSpacing: TextUnit,
    baselineShift: BaselineShift?,
    textGeometricTransform: TextGeometricTransform?,
    localeList: LocaleList?,
    background: Color,
    textDecoration: TextDecoration?,
    shadow: Shadow?,
    platformStyle: PlatformSpanStyle?,
    drawStyle: DrawStyle?
)
Cmn
SpanStyle
copy(
    brush: Brush?,
    alpha: Float,
    fontSize: TextUnit,
    fontWeight: FontWeight?,
    fontStyle: FontStyle?,
    fontSynthesis: FontSynthesis?,
    fontFamily: FontFamily?,
    fontFeatureSettings: String?,
    letterSpacing: TextUnit,
    baselineShift: BaselineShift?,
    textGeometricTransform: TextGeometricTransform?,
    localeList: LocaleList?,
    background: Color,
    textDecoration: TextDecoration?,
    shadow: Shadow?,
    platformStyle: PlatformSpanStyle?,
    drawStyle: DrawStyle?
)
Cmn
open operator Boolean
equals(other: Any?)
Cmn
open Int
Cmn
SpanStyle
merge(other: SpanStyle?)

Returns a new span style that is a combination of this style and the given other style.
Cmn
operator SpanStyle
plus(other: SpanStyle)

Plus operator overload that applies a merge.
Cmn
open String
Cmn

Public properties
Float

Opacity of text.
Cmn
Color
Cmn
BaselineShift?
Cmn
Brush?

Brush to draw text.
Cmn
Color

Color to draw text.
Cmn
DrawStyle?
Cmn
FontFamily?
Cmn
String?
Cmn
TextUnit
Cmn
FontStyle?
Cmn
FontSynthesis?
Cmn
FontWeight?
Cmn
TextUnit
Cmn
LocaleList?
Cmn
PlatformSpanStyle?
Cmn
Shadow?
Cmn
TextDecoration?
Cmn
TextGeometricTransform?
Cmn

Public constructors

SpanStyle

Cmn
Added in 1.9.0
SpanStyle(
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    fontFamily: FontFamily? = null,
    fontFeatureSettings: String? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    baselineShift: BaselineShift? = null,
    textGeometricTransform: TextGeometricTransform? = null,
    localeList: LocaleList? = null,
    background: Color = Color.Unspecified,
    textDecoration: TextDecoration? = null,
    shadow: Shadow? = null,
    platformStyle: PlatformSpanStyle? = null,
    drawStyle: DrawStyle? = null
)

Styling configuration for text spans.

Configures character-level styles such as text color, font size, font family, background color, and text decorations.

For paragraph-level styling (e.g., alignment, line height), see ParagraphStyle.

import androidx.compose.material3.Text
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.sp

Text(
    fontSize = 16.sp,
    text =
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Red)) { append("Hello") }
            withStyle(SpanStyle(color = Color.Blue)) { append(" World") }
        },
)
 
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString

buildAnnotatedString {
    append("Hello")
    // push green text style so that any appended text will be green
    pushStyle(SpanStyle(color = Color.Green))
    // append new text, this text will be rendered as green
    append(" World")
    // pop the green style
    pop()
    // append a string without style
    append("!")
    // then style the last added word as red, exclamation mark will be red
    addStyle(SpanStyle(color = Color.Red), "Hello World".length, this.length)

    toAnnotatedString()
}
 
import androidx.compose.material3.Text
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.BaselineShift
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.sp

Text(
    fontSize = 20.sp,
    text =
        buildAnnotatedString {
            append(text = "Hello")
            withStyle(SpanStyle(baselineShift = BaselineShift.Superscript, fontSize = 16.sp)) {
                append("superscript")
                withStyle(SpanStyle(baselineShift = BaselineShift.Subscript)) {
                    append("subscript")
                }
            }
        },
)
Parameters
color: Color = Color.Unspecified

color to apply to the text
fontSize: TextUnit = TextUnit.Unspecified

glyph size. If TextUnit.Unspecified, inherits size from parent or default style.
fontWeight: FontWeight? = null

typeface thickness (e.g., bold)
fontStyle: FontStyle? = null

typeface variant (e.g., italic)
fontSynthesis: FontSynthesis? = null

font synthesis rules to fallback to bold/italic if the requested style is missing in fontFamily
fontFamily: FontFamily? = null

font family for rendering
fontFeatureSettings: String? = null

advanced font features in CSS format (e.g., "smcp" for small caps)
letterSpacing: TextUnit = TextUnit.Unspecified

amount of space (in SP or EM) to add between letters. If TextUnit.Unspecified, inherits from parent.
baselineShift: BaselineShift? = null

vertical shift amount from the baseline (e.g., for superscript or subscript)
textGeometricTransform: TextGeometricTransform? = null

geometric transformation to apply
localeList: LocaleList? = null

locale list for region-specific glyphs
background: Color = Color.Unspecified

color of background rectangle covering entire line height from start to end
textDecoration: TextDecoration? = null

decorations (e.g., underline)
shadow: Shadow? = null

shadow effect
platformStyle: PlatformSpanStyle? = null

platform-specific parameters
drawStyle: DrawStyle? = null

drawing style (fill or stroke)
See also
AnnotatedString
TextStyle
ParagraphStyle

SpanStyle

Cmn
Added in 1.9.0
SpanStyle(
    brush: Brush?,
    alpha: Float = Float.NaN,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    fontFamily: FontFamily? = null,
    fontFeatureSettings: String? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    baselineShift: BaselineShift? = null,
    textGeometricTransform: TextGeometricTransform? = null,
    localeList: LocaleList? = null,
    background: Color = Color.Unspecified,
    textDecoration: TextDecoration? = null,
    shadow: Shadow? = null,
    platformStyle: PlatformSpanStyle? = null,
    drawStyle: DrawStyle? = null
)

Styling configuration for text spans.

Configures character-level styles such as text brush, opacity, font size, font family, background color, and text decorations.

For paragraph-level styling (e.g., alignment, line height), see ParagraphStyle.

import androidx.compose.material3.Text
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.sp

val brushColors = listOf(Color.Red, Color.Blue, Color.Green, Color.Yellow)
Text(
    fontSize = 16.sp,
    text =
        buildAnnotatedString {
            withStyle(SpanStyle(brush = Brush.radialGradient(brushColors))) { append("Hello") }
            withStyle(SpanStyle(brush = Brush.radialGradient(brushColors.asReversed()))) {
                append(" World")
            }
        },
)
 
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString

buildAnnotatedString {
    append("Hello")
    // push green text style so that any appended text will be green
    pushStyle(SpanStyle(color = Color.Green))
    // append new text, this text will be rendered as green
    append(" World")
    // pop the green style
    pop()
    // append a string without style
    append("!")
    // then style the last added word as red, exclamation mark will be red
    addStyle(SpanStyle(color = Color.Red), "Hello World".length, this.length)

    toAnnotatedString()
}
 
import androidx.compose.material3.Text
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.BaselineShift
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.sp

Text(
    fontSize = 20.sp,
    text =
        buildAnnotatedString {
            append(text = "Hello")
            withStyle(SpanStyle(baselineShift = BaselineShift.Superscript, fontSize = 16.sp)) {
                append("superscript")
                withStyle(SpanStyle(baselineShift = BaselineShift.Subscript)) {
                    append("subscript")
                }
            }
        },
)
Parameters
brush: Brush?

Brush for painting text, null for unspecified
alpha: Float = Float.NaN

opacity applied to brush (0.0 to 1.0)
fontSize: TextUnit = TextUnit.Unspecified

glyph size. If TextUnit.Unspecified, inherits size from parent or default style.
fontWeight: FontWeight? = null

typeface thickness (e.g., bold)
fontStyle: FontStyle? = null

typeface variant (e.g., italic)
fontSynthesis: FontSynthesis? = null

font synthesis rules to fallback to bold/italic if the requested style is missing in fontFamily
fontFamily: FontFamily? = null

font family for rendering
fontFeatureSettings: String? = null

advanced font features in CSS format (e.g., "smcp" for small caps)
letterSpacing: TextUnit = TextUnit.Unspecified

amount of space (in SP or EM) to add between letters. If TextUnit.Unspecified, inherits from parent.
baselineShift: BaselineShift? = null

vertical shift amount from the baseline (e.g., for superscript or subscript)
textGeometricTransform: TextGeometricTransform? = null

geometric transformation to apply
localeList: LocaleList? = null

locale list for region-specific glyphs
background: Color = Color.Unspecified

color of background rectangle covering entire line height from start to end
textDecoration: TextDecoration? = null

decorations (e.g., underline)
shadow: Shadow? = null

shadow effect
platformStyle: PlatformSpanStyle? = null

platform-specific parameters
drawStyle: DrawStyle? = null

drawing style (fill or stroke)
See also
AnnotatedString
TextStyle
ParagraphStyle

Public functions

copy

Cmn
Added in 1.10.0
fun copy(
    color: Color = this.color,
    fontSize: TextUnit = this.fontSize,
    fontWeight: FontWeight? = this.fontWeight,
    fontStyle: FontStyle? = this.fontStyle,
    fontSynthesis: FontSynthesis? = this.fontSynthesis,
    fontFamily: FontFamily? = this.fontFamily,
    fontFeatureSettings: String? = this.fontFeatureSettings,
    letterSpacing: TextUnit = this.letterSpacing,
    baselineShift: BaselineShift? = this.baselineShift,
    textGeometricTransform: TextGeometricTransform? = this.textGeometricTransform,
    localeList: LocaleList? = this.localeList,
    background: Color = this.background,
    textDecoration: TextDecoration? = this.textDecoration,
    shadow: Shadow? = this.shadow,
    platformStyle: PlatformSpanStyle? = this.platformStyle,
    drawStyle: DrawStyle? = this.drawStyle
): SpanStyle

copy

Cmn
Added in 1.10.0
fun copy(
    brush: Brush?,
    alpha: Float = this.alpha,
    fontSize: TextUnit = this.fontSize,
    fontWeight: FontWeight? = this.fontWeight,
    fontStyle: FontStyle? = this.fontStyle,
    fontSynthesis: FontSynthesis? = this.fontSynthesis,
    fontFamily: FontFamily? = this.fontFamily,
    fontFeatureSettings: String? = this.fontFeatureSettings,
    letterSpacing: TextUnit = this.letterSpacing,
    baselineShift: BaselineShift? = this.baselineShift,
    textGeometricTransform: TextGeometricTransform? = this.textGeometricTransform,
    localeList: LocaleList? = this.localeList,
    background: Color = this.background,
    textDecoration: TextDecoration? = this.textDecoration,
    shadow: Shadow? = this.shadow,
    platformStyle: PlatformSpanStyle? = this.platformStyle,
    drawStyle: DrawStyle? = this.drawStyle
): SpanStyle

equals

Cmn
Added in 1.0.0
open operator fun equals(other: Any?): Boolean

hashCode

Cmn 
open fun hashCode(): Int

merge

Cmn
Added in 1.0.0
fun merge(other: SpanStyle? = null): SpanStyle

Returns a new span style that is a combination of this style and the given other style.

other span style's null or inherit properties are replaced with the non-null properties of this span style. Another way to think of it is that the "missing" properties of the other style are filled by the properties of this style.

If the given span style is null, returns this span style.

Parameters
other: SpanStyle? = null

style to merge

plus

Cmn
Added in 1.0.0
operator fun plus(other: SpanStyle): SpanStyle

Plus operator overload that applies a merge.

toString

Cmn 
open fun toString(): String

Public properties

alpha

Cmn
Added in 1.3.0
val alpha: Float

Opacity of text. This value is either provided along side Brush, or via alpha channel in color.

background

Cmn
Added in 1.0.0
val background: Color

baselineShift

Cmn
Added in 1.0.0
val baselineShift: BaselineShift?

brush

Cmn
Added in 1.2.0
val brush: Brush?

Brush to draw text. If not null, overrides color.

color

Cmn
Added in 1.0.0
val color: Color

Color to draw text.

drawStyle

Cmn
Added in 1.4.0
val drawStyle: DrawStyle?

fontFamily

Cmn
Added in 1.0.0
val fontFamily: FontFamily?

fontFeatureSettings

Cmn
Added in 1.0.0
val fontFeatureSettings: String?

fontSize

Cmn
Added in 1.0.0
val fontSize: TextUnit

fontStyle

Cmn
Added in 1.0.0
val fontStyle: FontStyle?

fontSynthesis

Cmn
Added in 1.0.0
val fontSynthesis: FontSynthesis?

fontWeight

Cmn
Added in 1.0.0
val fontWeight: FontWeight?

letterSpacing

Cmn
Added in 1.0.0
val letterSpacing: TextUnit

localeList

Cmn
Added in 1.0.0
val localeList: LocaleList?

platformStyle

Cmn
Added in 1.2.0
val platformStyle: PlatformSpanStyle?

shadow

Cmn
Added in 1.0.0
val shadow: Shadow?

textDecoration

Cmn
Added in 1.0.0
val textDecoration: TextDecoration?

textGeometricTransform

Cmn
Added in 1.0.0
val textGeometricTransform: TextGeometricTransform?