tabs

Import

import Tabs from '@mui/material/Tabs';
// or
import { Tabs } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Props of the native component are also available.

Name	Type	Default	Description
action	ref	-	Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It supports two actions: updateIndicator() and updateScrollButtons()
allowScrollButtonsMobile	bool	false	If true, the scroll buttons aren’t forced hidden on mobile. By default the scroll buttons are hidden on mobile and takes precedence over scrollButtons.
aria-label	string	-	The label for the Tabs as a string.
aria-labelledby	string	-	An id or list of ids separated by a space that label the Tabs.
centered	bool	false	If true, the tabs are centered. This prop is intended for large views.
children	node	-	The content of the component.
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
component	elementType	-	The component used for the root node. Either a string to use a HTML element or a component.
indicatorColor	‘primary’ | ‘secondary’ | string	‘primary’	Determines the color of the indicator.
onChange	func	-	Callback fired when the value changes. Signature: function(event: React.SyntheticEvent, value: any) => void
orientation	‘horizontal’ | ‘vertical’	‘horizontal’	The component orientation (layout flow direction).
ScrollButtonComponent	elementType	TabScrollButton	The component used to render the scroll buttons.
scrollButtons	‘auto’ | false | true	‘auto’	Determine behavior of scroll buttons when tabs are set to scroll.
selectionFollowsFocus	bool	-	If true the selected tab changes on focus. Otherwise it only changes on activation.
slotProps	object	{}	The extra props for the slot components.
slots	object	{}	The components used for each slot inside.
sx	Array | func | object	-	The system prop that allows defining system overrides as well as additional CSS styles.
TabIndicatorProps	object	{}	Props applied to the tab indicator element.
TabScrollButtonProps	object	{}	Props applied to the TabScrollButton element.
textColor	‘inherit’ | ‘primary’ | ‘secondary’	‘primary’	Determines the color of the Tab.
value	any	-	The value of the currently selected Tab.
variant	‘fullWidth’ | ‘scrollable’ | ‘standard’	‘standard’	Determines additional display behavior of the tabs.
visibleScrollbar	bool	false	If true, the scrollbar is visible.

The ref is forwarded to the root element.

Theme default props

You can use MuiTabs to change the default props of this component with the theme.

CSS Classes

Class name	Rule name	Description
.MuiTabs-centered	centered	Styles applied to the flex container element if centered={true} & !variant="scrollable".
.MuiTabs-fixed	fixed	Styles applied to the tablist element if !variant="scrollable".
…	…	(other classes omitted for brevity)

You can override the style of the component using one of these customization options:

• With a global class name
• With a rule name as part of the component’s styleOverrides property in a custom theme

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.