Tabs allow the user to interact across the sections to switch from one set of content to another, making the transition easily from one peer to the other.


defaultActiveTabIndexnumberInitially active tab, only when it is uncontrolled.-
activeTabIndexnumberThe index of the active tab. If undefined, the component will be uncontrolled and the active tab will be managed internally by the component.-
{ label: string, icon: string | (React.ReactNode & React.SVGProps <SVGSVGElement>), isDisabled: boolean, notificationNumber: boolean | number }[]An array of objects representing the tabs. Each of them has the following properties:
  • label: Tab label.
  • icon: Material Symbol name or SVG element used as the icon that will be displayed in the tab. When using Material Symbols, replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol name with "filled_".
  • isDisabled: Whether the tab is disabled or not. If the component is uncontrolled and the selected tab is disabled, the first non-disabled tab from the array will be selected.
  • notificationNumber: It can have boolean type or number type. If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a number is specified, the component will display a badge with the value as its label. Take into account that if that number is greater than 99, it will appear as +99 in the badge.
iconPosition'top' | 'left'Whether the icon should appear above or to the left of the label.'top'
onTabClick(index: number) => voidThis function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.-
onTabHover(index: number) => voidThis function will be called when the user hovers a tab. The index of the hovered tab will be passed as a parameter.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
tabIndexnumberValue of the tabindex attribute applied to each tab.0