New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material 3 Compose

Tab

Common

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

Tabs image

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.3.0-beta04")
}

Overloads

@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

namedescription
selectedwhether this tab is selected or not
onClickcalled when this tab is clicked
modifierthe [Modifier] to be applied to this tab
enabledcontrols 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.
textthe text label displayed in this tab
iconthe icon displayed in this tab
selectedContentColorthe color for the content of this tab when selected, and the color of the ripple.
unselectedContentColorthe color for the content of this tab when not selected
interactionSourcean 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. @see LeadingIconTab
@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

namedescription
selectedwhether this tab is selected or not
onClickcalled when this tab is clicked
modifierthe [Modifier] to be applied to this tab
enabledcontrols 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.
selectedContentColorthe color for the content of this tab when selected, and the color of the ripple.
unselectedContentColorthe color for the content of this tab when not selected
interactionSourcean 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.
contentthe content of this tab

Code Example

FancyTab

@Composable
@Sampled
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)
            )
        }
    }
}