Compose Component

TitleChip

Title Chip is a component used to provide context for associated content, such as a Card.

TitleChipSample

@Sampled
@Composable
fun TitleChipSample() {
    TitleChip { Text("Messages") }
}

TitleChipWithLeadingIconSample

@Sampled
@Composable
fun TitleChipWithLeadingIconSample() {
    TitleChip(leadingIcon = { Icon(FavoriteIcon, "Localized description") }) { Text("Messages") }
}

TitleChipWithCardSample

@Sampled
@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))
        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: