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.

MUI Tab Indicator with double thickness, custom color, and an HTML title
MUI Tab Indicator with double thickness, custom color, and an HTML title

Here are additional useful resources:

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

How To Style MUI Tabs and Tab Indic...
How To Style MUI Tabs and Tab Indicator

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.

Accepted MUI Tab Indicator Props
Accepted MUI Tab Indicator Props

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:

MUI Tab Indicator Width
MUI Tab Indicator Width

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

Share this post:

2 thoughts on “The Ultimate MUI Tab Indicator Tutorial (Props, Color, Size)”

  1. Thank you! I found this resource content helpful and it helped me overcome the issue I was faced with 😊. Kudos…..
    I was trying to target the MuiTab in it’s active state inorder to make some styling changes… with your explanation, I got to know it was the .Mui-selected I needed to target

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.