by @alexstyl
✉️ Leave your feedback

← Back to Material 3 Compose


Material 3
. Since 1.2.0-alpha09



Community Notes

<a href="" class="external" target="_blank">Material Design Fixed Primary tabs</a>

Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations. Fixed tabs display all tabs in a set simultaneously. They are best for switching between related content quickly, such as between transportation methods in a map. To navigate between fixed tabs, tap an individual tab, or swipe left or right in the content area.

A TabRow contains a row of Tabs, and displays an indicator underneath the currently selected tab. A TabRow places its tabs evenly spaced along the entire row, with each tab taking up an equal amount of space. See PrimaryScrollableTabRow for a tab row that does not enforce equal size, and allows scrolling to tabs that do not fit on screen.

A simple example with text tabs looks like:



fun PrimaryTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = TabRowDefaults.primaryContainerColor,
    contentColor: Color = TabRowDefaults.primaryContentColor,
    indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
        if (selectedTabIndex < tabPositions.size) {
            val width by animateDpAsState(targetValue = tabPositions[selectedTabIndex].contentWidth)
                width = width
    divider: @Composable () -> Unit = @Composable {
    tabs: @Composable () -> Unit


selectedTabIndexthe index of the currently selected tab
modifierthe Modifier to be applied to this tab row
containerColorthe color used for the background of this tab row. Use Color.Transparent to have no color.
contentColorthe preferred color for content inside this tab row. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.
indicatorthe indicator that represents which tab is currently selected. By default this will be a TabRowDefaults.PrimaryIndicator, using a TabRowDefaults.tabIndicatorOffset modifier to animate its position.
dividerthe divider displayed at the bottom of the tab row. This provides a layer of separation between the tab row and the content displayed underneath.
tabsthe tabs inside this tab row. Typically this will be multiple Tabs. Each element inside this lambda will be measured and placed evenly across the row, each taking up equal space
Previous ComponentPrimaryScrollableTabRow
Next ComponentProvideTextStyle