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.


tabs: object[]An array of objects representing the tabs. Each of them has the following properties:
  • label: Tab label.
  • icon: Element or path used as the icon that will be displayed in the tab.
  • 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 the value is 'true', an empty badge will appear. If it is 'false', no badge will appear. If a number is put it will be shown as the label of the notification in the tab, taking into account that if that number is greater than 99, it will appear as '+99' in the badge.
iconPosition: 'top' | 'left''top'Whether the icon should appear above or to the left of the label.
defaultActiveTabIndex: numberInitially active tab, only when it is uncontrolled.
activeTabIndex: numberThe index of the active tab. If undefined, the component will be uncontrolled and the active tab will be managed internally by the component.
onTabClick: functionThis function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.
onTabHover: functionThis function will be called when the user hovers a tab.The index of the hovered tab will be passed as a parameter.
margin: string | objectSize of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number0Value of the tabindex for each tab.