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

Common
@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,
)
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 Interaction s 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. |
Common
@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,
)
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 Interaction s 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 |
Code Examples
FancyTab
@Composable
fun FancyTab(title: String, onClick: () -> Unit, selected: Boolean) {
Tab(selected, onClick) {
Column(
Modifier.padding(10.dp).height(50.dp).fillMaxWidth(),
verticalArrangement = Arrangement.SpaceBetween,
) {
Box(
Modifier.size(10.dp)
.align(Alignment.CenterHorizontally)
.background(
color =
if (selected) MaterialTheme.colorScheme.primary
else MaterialTheme.colorScheme.background
)
)
Text(
text = title,
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.align(Alignment.CenterHorizontally),
)
}
}
}
Create your own Component Library
Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled