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
Legacy defaultActiveTabIndex	`number`	Initially active tab, only when it is uncontrolled.	-
Legacy 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.	-
Legacy 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.	-
Experimental children	`React.ReactNode`	Contains one or more `DxcTabs.Tab`.	-
iconPosition	`'top' \| 'left'`	Whether the icon should appear above or to the left of the label.	`'top'`
Legacy 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.	-
Legacy 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`

DxcTabs.Tab

Single tab, part of the set of Tabs.

Props

Name	Type	Description	Default
active	`boolean`	Whether the tab is active or not.	`false`
defaultActive	`boolean`	Whether the tab is active or not by default, but mantaining the uncontrolled behaviour.	`false`
disabled	`boolean`	Whether the tab is disabled or not.	`false`
Required label	`string`	Tab label text.	-
title	`string`	Tooltip text for the tab.	-
icon	`string \| (React.ReactNode & React.SVGProps <SVGSVGElement>)`	Material Symbol name or SVG element 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_"`.	-
onClick	`() => void`	This function will be called when the user clicks on this tab.	-
onHover	`() => void`	This function will be called when the user hovers this tab.	-
notificationNumber	`boolean \| number`	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.	`false`
Required children	`React.ReactNode`	Contains the component to be rendered when this tab is active.	-

Examples

Controlled

() => {
  const [selectedTab, setSelectedTab] = useState("Mail");
  
  return (
    <DxcInset space="2rem">
      <DxcTabs>
        <DxcTabs.Tab label="Mail" active={selectedTab === "Mail"} onClick={() => setSelectedTab("Mail")}>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Calendar" active={selectedTab === "Calendar"} onClick={() => setSelectedTab("Calendar")}>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Contacts" active={selectedTab === "Contacts"} onClick={() => setSelectedTab("Contacts")}>
          <></>
        </DxcTabs.Tab>
      </DxcTabs>
    </DxcInset>
  );
}

() => {
  const [selectedTab, setSelectedTab] = useState("Mail");
  
  return (
    <DxcInset space="2rem">
      <DxcTabs>
        <DxcTabs.Tab label="Mail" active={selectedTab === "Mail"} onClick={() => setSelectedTab("Mail")}>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Calendar" active={selectedTab === "Calendar"} onClick={() => setSelectedTab("Calendar")}>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Contacts" active={selectedTab === "Contacts"} onClick={() => setSelectedTab("Contacts")}>
          <></>
        </DxcTabs.Tab>
      </DxcTabs>
    </DxcInset>
  );
}

Uncontrolled

() => {
  return (
    <DxcInset space="2rem">
      <DxcTabs>
        <DxcTabs.Tab label="Mail" defaultActive>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Calendar">
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Contacts">
          <></>
        </DxcTabs.Tab></DxcTabs>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcTabs>
        <DxcTabs.Tab label="Mail" defaultActive>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Calendar">
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Contacts">
          <></>
        </DxcTabs.Tab></DxcTabs>
    </DxcInset>
  );
}

Icons and notifications

() => {
  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>
        <DxcTabs.Tab label="3G Mobile" icon={mobileIcon} notificationNumber={true}>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Ethernet" icon="settings_ethernet" notificationNumber={2} disabled>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Wifi" icon="wifi" notificationNumber={120}>
          <></>
        </DxcTabs.Tab>  
      </DxcTabs>
    </DxcInset>
  );
}

() => {
  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>
        <DxcTabs.Tab label="3G Mobile" icon={mobileIcon} notificationNumber={true}>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Ethernet" icon="settings_ethernet" notificationNumber={2} disabled>
          <></>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Wifi" icon="wifi" notificationNumber={120}>
          <></>
        </DxcTabs.Tab>  
      </DxcTabs>
    </DxcInset>
  );
}

Examples (Legacy)

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 and notifications

() => {
  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,
            notificationNumber: true
          },
          {
            label: "Ethernet",
            icon: "settings_ethernet",
            isDisabled: true,
            notificationNumber: 2
          },
          {
            label: "Wifi",
            icon: "wifi",
            notificationNumber: 120
          },
        ]}
      ></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,
            notificationNumber: true
          },
          {
            label: "Ethernet",
            icon: "settings_ethernet",
            isDisabled: true,
            notificationNumber: 2
          },
          {
            label: "Wifi",
            icon: "wifi",
            notificationNumber: 120
          },
        ]}
      ></DxcTabs>
    </DxcInset>
  );
}

Props
DxcTabs.Tab
- Props
Examples
Examples (Legacy)

Edit this page on GitHub

Report an issue on GitHub

Table

NextTag

Tabs

Props

DxcTabs.Tab

Props

Examples

Controlled

Uncontrolled

Icons and notifications

Examples (Legacy)

Controlled

Uncontrolled

Icons and notifications

Contents