The Ultimate MUI Tab Indicator Tutorial (Props, Color, Size)

The MUI Tabs component renders an indicator that gives a visual cue of which tab is selected. This indicator can be easily sized and styled in MUI v5 by using TabIndicatorProps.

In this demo I will show what values TabIndicatorProps accepts and how to change width, height, and color of the tab indicator.

Here are additional useful resources:

• Complete guides to MUI ‘sx’ prop, styled components, and makeStyles
• How to Remove the Tab Indicator (and Style Tabs)
• How to Customize Material UI AppBar Color and Styling
• The Best MUI Tabs Tutorial: Hover, Active, Focus, and onClick

Here’s a link to the YouTube version of this post or watch it below:

MUI Tab Indicator Props

The Material-UI Tabs component controls the tab indicator that appears under each tab. The Tabs component has a prop called TabIndicatorProps that can be passed any prop that a HTMLElement TypeScript type can accept. It can also accept the new MUI 5 sx prop.

I passed title and hidden to TabIndicatorProps. The title prop renders a small HTML tooltip when the element is hovered. The hidden prop is a very useful way of hiding the component without CSS.

TabIndicatorProps={{
  title: "indicator",
  //hidden: true
}}

I unhid the tab indicator for this demo.

MUI Tab Indicator Color

The tab indicator element color can be customized by passing backgroundColor to the sx prop:

TabIndicatorProps={{
  sx: { backgroundColor: "red" }
}}

Notice that I had to pass backgroundColor, not simply the color prop. The tab indicator gives a visual cue simply by having it’s entire area filled with a color.

MUI Tab Indicator Width and Height

By default the tab indicator is 2px tall. I doubled this to add a thickness to the indicator. Notice that the shorthand of 4 is accepted and translates to px.

TabIndicatorProps={{
  sx: { height: 4 } //width: "25% !important"
}}

MUI tab indicator width is calculated internally and applied with inline styling so that it is difficult to override:

I show above how this can be overridden with !important, but I don’t recommend overriding it. You would need to figure out whatever internal MUI calculation is occurring and then adjust that somehow to make custom width useful.

MUI Tab Indicator Classes

The most important default class that MUI applies to the tab indicator element is MuiTabs-indicator. If you are using MUI v5, you shouldn’t need to target this class and instead you can simply style using TabIndicatorProps.sx.

If you are stil using Material-UI v4, then the MuiTabs-indicator class may be useful for nested selectors and styling.

Resources

Code Sandbox Link

Material-UI Tabs docs