or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

buttons.mdcontent.mdindex.mdinputs.mdlayout.mdnavigation.mdtheming.md
tile.json

content.mddocs/

Content Display

Components for displaying text, icons, and progress indicators with Material3 styling. These components provide consistent visual representation of content with proper theming and accessibility support.

Imports

import androidx.compose.material3.*
import androidx.compose.material3.Text
import androidx.compose.material3.Icon
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.VerticalDivider
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.LocalContentColor

Capabilities

Text

Material3 text component with integrated typography and theming support.

/**
 * Material3 text component with typography integration and theming support
 * @param text The text content to be displayed
 * @param modifier Modifier to be applied to the text
 * @param color Color of the text (uses theme color if unspecified)
 * @param fontSize Size of the text
 * @param fontStyle Style of the text (normal, italic)
 * @param fontWeight Weight of the text (normal, bold, etc.)
 * @param fontFamily Font family for the text
 * @param letterSpacing Space between characters
 * @param textDecoration Decoration applied to text (underline, strikethrough)
 * @param textAlign Alignment of text within its bounds
 * @param lineHeight Height of text lines
 * @param overflow How to handle text overflow
 * @param softWrap Whether text should break at soft line breaks
 * @param maxLines Maximum number of lines for the text
 * @param minLines Minimum number of lines for the text
 * @param onTextLayout Callback for text layout information
 * @param style Text style from Material3 typography scale
 */
@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

/**
 * Material3 text component for AnnotatedString with rich text formatting
 * @param text The annotated text content with formatting
 * @param modifier Modifier to be applied to the text
 * @param color Color of the text
 * @param fontSize Size of the text
 * @param fontStyle Style of the text
 * @param fontWeight Weight of the text
 * @param fontFamily Font family for the text
 * @param letterSpacing Space between characters
 * @param textDecoration Decoration applied to text
 * @param textAlign Alignment of text within its bounds
 * @param lineHeight Height of text lines
 * @param overflow How to handle text overflow
 * @param softWrap Whether text should break at soft line breaks
 * @param maxLines Maximum number of lines for the text
 * @param minLines Minimum number of lines for the text
 * @param inlineContent Map of inline content for embedded elements
 * @param onTextLayout Callback for text layout information
 * @param style Text style from Material3 typography scale
 */
@Composable
fun Text(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

Usage Examples:

// Basic text with Material3 typography
Text(
    text = "Hello, Material3!",
    style = MaterialTheme.typography.headlineMedium
)

// Text with custom styling
Text(
    text = "Custom styled text",
    color = MaterialTheme.colorScheme.primary,
    fontWeight = FontWeight.Bold,
    fontSize = 18.sp
)

// Text with overflow handling
Text(
    text = "This is a very long text that might overflow the available space",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

// Rich text with AnnotatedString
val annotatedText = buildAnnotatedString {
    append("Visit our ")
    pushStyle(SpanStyle(color = MaterialTheme.colorScheme.primary))
    append("website")
    pop()
    append(" for more information")
}
Text(text = annotatedText)

Icon

Material3 icon component for displaying vector graphics, bitmaps, and custom painters.

/**
 * Material3 icon component for ImageVector graphics
 * @param imageVector Vector graphic to be displayed
 * @param contentDescription Accessibility description for the icon
 * @param modifier Modifier to be applied to the icon
 * @param tint Color tint applied to the icon
 */
@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

/**
 * Material3 icon component for ImageBitmap graphics
 * @param bitmap Bitmap image to be displayed
 * @param contentDescription Accessibility description for the icon
 * @param modifier Modifier to be applied to the icon
 * @param tint Color tint applied to the icon
 */
@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

/**
 * Material3 icon component for Painter graphics
 * @param painter Painter to draw the icon
 * @param contentDescription Accessibility description for the icon
 * @param modifier Modifier to be applied to the icon
 * @param tint Color tint applied to the icon
 */
@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

Usage Examples:

// Icon with Material Design Icons
Icon(
    imageVector = Icons.Default.Favorite,
    contentDescription = "Add to favorites"
)

// Icon with custom color
Icon(
    imageVector = Icons.Default.Home,
    contentDescription = "Home",
    tint = MaterialTheme.colorScheme.primary
)

// Icon with custom size
Icon(
    imageVector = Icons.Default.Settings,
    contentDescription = "Settings",
    modifier = Modifier.size(32.dp)
)

// Icon from bitmap resource
Icon(
    bitmap = ImageBitmap.imageResource(id = R.drawable.custom_icon),
    contentDescription = "Custom icon"
)

// Icon from painter resource
Icon(
    painter = painterResource(id = R.drawable.vector_icon),
    contentDescription = "Vector icon"
)

CircularProgressIndicator

Circular progress indicator for loading states and progress display.

/**
 * Material3 indeterminate circular progress indicator for unknown progress
 * @param modifier Modifier to be applied to the progress indicator
 * @param color Color of the progress indicator
 * @param strokeWidth Width of the progress indicator stroke
 * @param trackColor Color of the background track
 * @param strokeCap Shape of the progress indicator ends
 */
@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
    trackColor: Color = ProgressIndicatorDefaults.circularTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularIndeterminateStrokeCap,
)

/**
 * Material3 determinate circular progress indicator for known progress
 * @param progress Current progress value between 0.0 and 1.0
 * @param modifier Modifier to be applied to the progress indicator
 * @param color Color of the progress indicator
 * @param strokeWidth Width of the progress indicator stroke
 * @param trackColor Color of the background track
 * @param strokeCap Shape of the progress indicator ends
 */
@Composable
fun CircularProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
    trackColor: Color = ProgressIndicatorDefaults.circularTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap,
)

Usage Examples:

// Indeterminate progress indicator
CircularProgressIndicator()

// Determinate progress indicator
var progress by remember { mutableFloatStateOf(0.0f) }
CircularProgressIndicator(
    progress = { progress }
)

// Custom colored progress indicator
CircularProgressIndicator(
    color = MaterialTheme.colorScheme.secondary,
    strokeWidth = 6.dp
)

// Progress indicator with track
CircularProgressIndicator(
    progress = { 0.75f },
    color = MaterialTheme.colorScheme.primary,
    trackColor = MaterialTheme.colorScheme.surfaceVariant
)

LinearProgressIndicator

Linear progress indicator for horizontal progress display.

/**
 * Material3 indeterminate linear progress indicator for unknown progress
 * @param modifier Modifier to be applied to the progress indicator
 * @param color Color of the progress indicator
 * @param trackColor Color of the background track
 * @param strokeCap Shape of the progress indicator ends
 */
@Composable
fun LinearProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.linearColor,
    trackColor: Color = ProgressIndicatorDefaults.linearTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap,
)

/**
 * Material3 determinate linear progress indicator for known progress
 * @param progress Current progress value between 0.0 and 1.0
 * @param modifier Modifier to be applied to the progress indicator
 * @param color Color of the progress indicator
 * @param trackColor Color of the background track
 * @param strokeCap Shape of the progress indicator ends
 */
@Composable
fun LinearProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.linearColor,
    trackColor: Color = ProgressIndicatorDefaults.linearTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap,
)

Usage Examples:

// Indeterminate linear progress
LinearProgressIndicator(
    modifier = Modifier.fillMaxWidth()
)

// Determinate linear progress
var downloadProgress by remember { mutableFloatStateOf(0.0f) }
LinearProgressIndicator(
    progress = { downloadProgress },
    modifier = Modifier.fillMaxWidth()
)

// Custom colored linear progress
LinearProgressIndicator(
    progress = { 0.65f },
    modifier = Modifier.fillMaxWidth(),
    color = MaterialTheme.colorScheme.tertiary
)

Badge

Small status indicator for displaying notifications or counts.

/**
 * Material3 badge for displaying small status indicators or counts
 * @param modifier Modifier to be applied to the badge
 * @param containerColor Background color of the badge
 * @param contentColor Color of the badge content
 * @param content Optional content displayed inside the badge
 */
@Composable
fun Badge(
    modifier: Modifier = Modifier,
    containerColor: Color = BadgeDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    content: (@Composable () -> Unit)? = null,
)

BadgedBox

Container for adding badges to other components.

/**
 * Material3 container for adding badges to other components
 * @param badge Badge content to be displayed
 * @param modifier Modifier to be applied to the badged box
 * @param content Main content that will have the badge attached
 */
@Composable
fun BadgedBox(
    badge: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit,
)

Usage Examples:

// Simple badge
Badge()

// Badge with count
Badge {
    Text("3")
}

// Badge on an icon
BadgedBox(
    badge = {
        Badge {
            Text("9+")
        }
    }
) {
    Icon(Icons.Default.Notifications, contentDescription = "Notifications")
}

// Custom colored badge
Badge(
    containerColor = MaterialTheme.colorScheme.error,
    contentColor = MaterialTheme.colorScheme.onError
) {
    Text("!")
}

Content Configuration Objects

ProgressIndicatorDefaults

Default configurations for progress indicators.

object ProgressIndicatorDefaults {
    /** Default color for circular progress indicators */
    val circularColor: Color
        @Composable get
    
    /** Default color for linear progress indicators */
    val linearColor: Color
        @Composable get
    
    /** Default track color for circular progress indicators */
    val circularTrackColor: Color
        @Composable get
    
    /** Default track color for linear progress indicators */
    val linearTrackColor: Color
        @Composable get
    
    /** Default stroke width for circular progress indicators */
    val CircularStrokeWidth: Dp
    
    /** Default stroke cap for indeterminate circular progress */
    val CircularIndeterminateStrokeCap: StrokeCap
    
    /** Default stroke cap for determinate circular progress */
    val CircularDeterminateStrokeCap: StrokeCap
    
    /** Default stroke cap for linear progress indicators */
    val LinearStrokeCap: StrokeCap
}

BadgeDefaults

Default configurations for badges.

object BadgeDefaults {
    /** Default container color for badges */
    val containerColor: Color
        @Composable get
}

Types

TextLayoutResult

class TextLayoutResult(
    val layoutInput: TextLayoutInput,
    val multiParagraph: MultiParagraph,
    val size: IntSize
) {
    /** Whether the text has visual overflow */
    val hasVisualOverflow: Boolean
    
    /** First baseline of the text */
    val firstBaseline: Float
    
    /** Last baseline of the text */
    val lastBaseline: Float
    
    /** Number of lines in the text */
    val lineCount: Int
    
    /** Whether the text did exceed max lines */
    val didOverflowHeight: Boolean
    
    /** Whether the text did exceed the width */
    val didOverflowWidth: Boolean
}

ImageVector Interface

interface ImageVector {
    /** Name of the vector */
    val name: String
    
    /** Default width of the vector */
    val defaultWidth: Dp
    
    /** Default height of the vector */
    val defaultHeight: Dp
    
    /** Viewport width for drawing coordinates */
    val viewportWidth: Float
    
    /** Viewport height for drawing coordinates */
    val viewportHeight: Float
    
    /** Tint color for the vector */
    val tintColor: Color
    
    /** Tint blend mode */
    val tintBlendMode: BlendMode
    
    /** Auto-mirroring for RTL layouts */
    val autoMirror: Boolean
    
    /** Root group containing vector paths */
    val root: VectorGroup
}

StrokeCap Enum

enum class StrokeCap {
    /** Flat edge at stroke ends */
    Butt,
    
    /** Rounded edge at stroke ends */
    Round,
    
    /** Square edge extending beyond stroke ends */
    Square
}

TextOverflow Enum

enum class TextOverflow {
    /** Clip overflow text */
    Clip,
    
    /** Show ellipsis for overflow text */
    Ellipsis,
    
    /** Show visible overflow text */
    Visible
}

TextAlign Enum

enum class TextAlign {
    Left, Right, Center, Justify, Start, End
}

FontWeight

class FontWeight(val weight: Int) {
    companion object {
        val Thin = FontWeight(100)
        val ExtraLight = FontWeight(200)
        val Light = FontWeight(300)
        val Normal = FontWeight(400)
        val Medium = FontWeight(500)
        val SemiBold = FontWeight(600)
        val Bold = FontWeight(700)
        val ExtraBold = FontWeight(800)
        val Black = FontWeight(900)
    }
}

FontStyle Enum

enum class FontStyle {
    Normal, Italic
}