Compose Multiplatform Material3/androidx.compose.material3/Tab

Tab

@Composable
fun Tab(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit? = null, icon: @Composable () -> Unit? = null, selectedContentColor: Color = LocalContentColor.current, unselectedContentColor: Color = selectedContentColor, interactionSource: MutableInteractionSource? = null)

Material Design tab.

A default Tab, also known as a Primary Navigation Tab. Tabs organize content across different screens, data sets, and other interactions.

Tabs image

A Tab represents a single page of content using a text label and/or icon. It represents its selected state by tinting the text label and/or image with selectedContentColor.

This should typically be used inside of a TabRow, see the corresponding documentation for example usage.

This Tab has slots for text and/or icon - see the other Tab overload for a generic Tab that is not opinionated about its content.

Parameters

selected

whether this tab is selected or not

onClick

called when this tab is clicked

modifier

the Modifier to be applied to this tab

enabled

controls the enabled state of this tab. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

text

the text label displayed in this tab

icon

the icon displayed in this tab

selectedContentColor

the color for the content of this tab when selected, and the color of the ripple.

unselectedContentColor

the color for the content of this tab when not selected

interactionSource

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this tab. You can use this to change the tab's appearance or preview the tab in different states. Note that if null is provided, interactions will still happen internally.

See also

@Composable
fun Tab(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, selectedContentColor: Color = LocalContentColor.current, unselectedContentColor: Color = selectedContentColor, interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

Material Design tab.

Tabs organize content across different screens, data sets, and other interactions.

Tabs image

Generic Tab overload that is not opinionated about content / color. See the other overload for a Tab that has specific slots for text and / or an icon, as well as providing the correct colors for selected / unselected states.

A custom tab using this API may look like:

Parameters

selected

whether this tab is selected or not

onClick

called when this tab is clicked

modifier

the Modifier to be applied to this tab

enabled

controls the enabled state of this tab. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

selectedContentColor

the color for the content of this tab when selected, and the color of the ripple.

unselectedContentColor

the color for the content of this tab when not selected

interactionSource

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this tab. You can use this to change the tab's appearance or preview the tab in different states. Note that if null is provided, interactions will still happen internally.

content

the content of this tab

Samples

androidx.compose.material3.samples.FancyTab