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),
            )
        }
    }
}