Tabs

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.

Props

Name	Type	Description	Default
defaultActiveTabIndex	`number`	Initially active tab, only when it is uncontrolled.	-
activeTabIndex	`number`	The index of the active tab. If undefined, the component will be uncontrolled and the active tab will be managed internally by the component.	-
Required tabs	`{ 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) => void`	This 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) => void`	This 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' \| Margin`	Size 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.	-
tabIndex	`number`	Value of the `tabindex` attribute applied to each tab.	`0`

Examples

Controlled

() => {
  const [activeTab, setActiveTab] = useState(0);
  const onTabClick = (i) => {
    setActiveTab(i);
  };

  return (
    <DxcInset space="2rem">
      <DxcTabs
        activeTabIndex={activeTab}
        onTabClick={onTabClick}
        tabs={[
          {
            label: "Mail",
          },
          {
            label: "Calendar",
          },
          {
            label: "Contacts",
          },
        ]}
      ></DxcTabs>
    </DxcInset>
  );
}

() => {
  const [activeTab, setActiveTab] = useState(0);
  const onTabClick = (i) => {
    setActiveTab(i);
  };

  return (
    <DxcInset space="2rem">
      <DxcTabs
        activeTabIndex={activeTab}
        onTabClick={onTabClick}
        tabs={[
          {
            label: "Mail",
          },
          {
            label: "Calendar",
          },
          {
            label: "Contacts",
          },
        ]}
      ></DxcTabs>
    </DxcInset>
  );
}

Uncontrolled

() => {
  return (
    <DxcInset space="2rem">
      <DxcTabs
        defaultActiveTabIndex={1}
        tabs={[
          {
            label: "Mail",
          },
          {
            label: "Calendar",
          },
          {
            label: "Contacts",
          },
        ]}
      ></DxcTabs>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcTabs
        defaultActiveTabIndex={1}
        tabs={[
          {
            label: "Mail",
          },
          {
            label: "Calendar",
          },
          {
            label: "Contacts",
          },
        ]}
      ></DxcTabs>
    </DxcInset>
  );
}

Icons

() => {
  const [activeTab, setActiveTab] = useState(0);
  const onTabClick = (i) => {
    setActiveTab(i);
  };


  const mobileIcon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="24px"
      viewBox="0 0 24 24"
      width="24px"
      fill="currentColor"
    >
      <g>
        <path d="M0,0h24v24H0V0z" fill="none" />
      </g>
      <g>
        <g>
          <path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z" />
        </g>
      </g>
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcTabs
        activeTabIndex={activeTab}
        onTabClick={onTabClick}
        tabs={[
          {
            label: "3G Mobile",
            icon: mobileIcon,
          },
          {
            label: "Ethernet",
            icon: "settings_ethernet",
          },
          {
            label: "Wifi",
            icon: "wifi",
          },
        ]}
      ></DxcTabs>
    </DxcInset>
  );
}

() => {
  const [activeTab, setActiveTab] = useState(0);
  const onTabClick = (i) => {
    setActiveTab(i);
  };


  const mobileIcon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="24px"
      viewBox="0 0 24 24"
      width="24px"
      fill="currentColor"
    >
      <g>
        <path d="M0,0h24v24H0V0z" fill="none" />
      </g>
      <g>
        <g>
          <path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z" />
        </g>
      </g>
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcTabs
        activeTabIndex={activeTab}
        onTabClick={onTabClick}
        tabs={[
          {
            label: "3G Mobile",
            icon: mobileIcon,
          },
          {
            label: "Ethernet",
            icon: "settings_ethernet",
          },
          {
            label: "Wifi",
            icon: "wifi",
          },
        ]}
      ></DxcTabs>
    </DxcInset>
  );
}

Props
Examples

Edit this page on GitHub

Report an issue on GitHub

Table

NextTag

Tabs

Props

Examples

Controlled

Uncontrolled

Icons

Contents